up

src/components/LxHeader/Item.vue

@@ -0,0 +1,53 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      if (icon.includes('el-icon')) {
+        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
+      }
+      else if(icon.includes("viewicon")){
+          let _icon=icon.split("/")[1];
+          vnodes.push(<Icon type={_icon} class='sub-el-icon' size="18" />)
+      }
+      else if(icon.includes("iconfont")){
+          let _icon=icon.split("/")[1]+" iconfont";
+          vnodes.push(<Icon custom={_icon} class='sub-el-icon' size="18" />)
+      }
+      else {
+        vnodes.push(<svg-icon icon-class={icon}/>)
+      }
+    }else {
+        var _icon="el-icon-menu";
+        vnodes.push(<i class={[_icon, 'sub-el-icon']} />)
+      }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
+
+<style scoped>
+.sub-el-icon {
+  color: currentColor;
+  width: 1em;
+  height: 1em;
+}
+</style>

src/components/LxHeader/index.vue

@@ -1,68 +1,83 @@
-<template>
+<template>
-  <div class="v-header">
+  <div class="v-header">
-    <div class="v-left-text">
+    <div class="v-left-text">
-      <Icon size="20" :type="icon" />
+      <item :icon="iconImg" />
-      <span>{{text}}</span>
+      <span style="margin-left: 3px;">{{title}}</span>
-    </div>
+    </div>
-    <div class="content">
+    <div class="content">
-      <slot name="content"></slot>
+      <slot name="content"></slot>
-    </div>
+    </div>
-    <!--  <div class="v-right-content">
+    <!--  <div class="v-right-content">
-      <slot></slot>
+      <slot></slot>
-    </div> -->
+    </div> -->
-    <div class="selerchcontent">
+    <div class="selerchcontent">
-      <slot></slot>
+      <slot></slot>
-    </div>
+    </div>
-  </div>
+  </div>
-</template>
+</template>
-<script>
+<script>
-  export default {
+  import Item from './Item'
-    props: {
+  export default {
-      icon: {
+    components: {
-        type: String,
+      Item
-        default: ""
+    },
-      },
+    props: {
-      text: {
+      icon: {
-        type: String,
+        type: String,
-        default: "未定义名称"
+        default: ""
-      }
+      },
-    }
+      text: {
-  };
+        type: String,
-</script>
+        default: "未定义名称"
-<style lang="less" scoped>
+      }
-  .v-header {
+    },
-    display: flex;
+    computed: {
-    border-bottom: 1px solid #dcdee2;
+      title() {
-    flex-direction: column;
+        return this.$route.meta.title;
-
+      },
-    .v-left-text {
+      iconImg() {
-      margin-top: 3px;
+        return this.$route.meta.icon;
-      padding-bottom: 6px;
+
-      // padding-top: 10px;
+      }
-      font-weight: bold;
+
-      font-size: 15px;
+
-      color: #338de3;
+    }
-      white-space: nowrap;
+  };
-      border-bottom: 2px solid #338de3;
+</script>
-
+<style lang="less" scoped>
-      >span {
+  .v-header {
-        position: relative;
+    display: flex;
-        // top: 2px;
+    border-bottom: 1px solid #dcdee2;
-      }
+    flex-direction: column;
-    }
+
-
+    .v-left-text {
-    .content {
+      margin-top: 3px;
-      line-height: 25px;
+      padding-bottom: 6px;
-      padding-left: 10px;
+      // padding-top: 10px;
-      padding: 6px 0 0 10px;
+      font-weight: bold;
-    }
+      font-size: 15px;
-
+      color: #338de3;
-    .v-right-content {
+      white-space: nowrap;
-      flex: 1;
+      border-bottom: 2px solid #338de3;
-    }
+
-
+      >span {
-    .selerchcontent {
+        position: relative;
-      flex: 1;
+        // top: 2px;
-    }
+      }
-  }
+    }
+
+    .content {
+      line-height: 25px;
+      padding-left: 10px;
+      padding: 6px 0 0 10px;
+    }
+
+    .v-right-content {
+      flex: 1;
+    }
+
+    .selerchcontent {
+      flex: 1;
+    }
+  }
 </style>