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