1.7.2

Former-commit-id: c71865a44f92cff9e961da64298224d008eae627

src/layout/header-aside/components/components/menu-item/index.vue

@@ -1,27 +0,0 @@
-<template>
-  <el-menu-item :index="menu.path || uniqueId">
-    <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
-    <i v-if="menu.icon === undefined & !menu.iconSvg" class="fa fa-file-o"></i>
-    <d2-icon-svg v-if="menu.iconSvg" :name="menu.iconSvg"/>
-    <span slot="title">{{menu.title || '未命名菜单'}}</span>
-  </el-menu-item>
-</template>
-
-<script>
-import { uniqueId } from 'lodash'
-export default {
-  name: 'd2-layout-header-aside-menu-item',
-  props: {
-    menu: {
-      type: Object,
-      required: false,
-      default: () => {}
-    }
-  },
-  data () {
-    return {
-      uniqueId: uniqueId('d2-menu-empty-')
-    }
-  }
-}
-</script>

src/layout/header-aside/components/components/menu-sub/index.vue

@@ -1,39 +0,0 @@
-<template>
-  <el-submenu :index="menu.path || uniqueId">
-    <template slot="title">
-      <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
-      <i v-if="menu.icon === undefined & !menu.iconSvg" class="fa fa-folder-o"></i>
-      <d2-icon-svg v-if="menu.iconSvg" :name="menu.iconSvg"/>
-      <span>{{menu.title}}</span>
-    </template>
-    <template v-for="(child, childIndex) in menu.children">
-      <d2-layout-header-aside-menu-item v-if="child.children === undefined" :menu="child" :key="childIndex"/>
-      <d2-layout-header-aside-menu-sub v-else :menu="child" :key="childIndex"/>
-    </template>
-  </el-submenu>
-</template>
-
-<script>
-import { uniqueId } from 'lodash'
-// 组件
-import d2LayoutMainMenuItem from '../menu-item'
-
-export default {
-  name: 'd2-layout-header-aside-menu-sub',
-  components: {
-    'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem
-  },
-  props: {
-    menu: {
-      type: Object,
-      required: false,
-      default: () => {}
-    }
-  },
-  data () {
-    return {
-      uniqueId: uniqueId('d2-menu-empty-')
-    }
-  }
-}
-</script>

src/layout/header-aside/components/libs/util.menu.js

@@ -0,0 +1,34 @@
+import { uniqueId } from 'lodash'
+
+// 创建 el-menu-item
+export function elMenuItem (createElement, menu) {
+  return createElement('el-menu-item', { props: { index: menu.path || uniqueId('d2-menu-empty-') } }, [
+    ...menu.icon ? [
+      createElement('i', { attrs: { class: `fa fa-${menu.icon}` } })
+    ] : [],
+    ...menu.icon === undefined & !menu.iconSvg ? [
+      createElement('i', { attrs: { class: 'fa fa-file-o' } })
+    ] : [],
+    ...menu.iconSvg ? [
+      createElement('d2-icon-svg', { props: { name: menu.iconSvg } })
+    ] : [],
+    createElement('span', { slot: 'title' }, menu.title || '未命名菜单')
+  ])
+}
+
+// 创建 el-submenu
+export function elSubmenu (createElement, menu) {
+  return createElement('el-submenu', { props: { index: menu.path || uniqueId('d2-menu-empty-') } }, [
+    ...menu.icon ? [
+      createElement('i', { slot: 'title', attrs: { class: `fa fa-${menu.icon}` } })
+    ] : [],
+    ...menu.icon === undefined & !menu.iconSvg ? [
+      createElement('i', { slot: 'title', attrs: { class: 'fa fa-file-o' } })
+    ] : [],
+    ...menu.iconSvg ? [
+      createElement('d2-icon-svg', { slot: 'title', props: { name: menu.iconSvg } })
+    ] : [],
+    createElement('span', { slot: 'title' }, menu.title || '未命名菜单'),
+    ...menu.children.map((child, childIndex) => (child.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, child))
+  ])
+}

src/layout/header-aside/components/menu-header/index.js

@@ -1,38 +1,49 @@
-<template>
-  <div class="d2-theme-header-menu" ref="page" :class="{'is-scrollable': isScroll}" flex="cross:center">
-    <div class="d2-theme-header-menu__content" ref="content" flex-box="1" flex>
-      <div class="d2-theme-header-menu__scroll" ref="scroll" flex-box="0" :style="'transform: translateX(' + currentTranslateX + 'px);'">
-        <el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
-          <template v-for="(menu, menuIndex) in header">
-            <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
-            <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
-          </template>
-        </el-menu>
-      </div>
-    </div>
-    <div v-if="isScroll" class="d2-theme-header-menu__prev" flex-box="0" @click="scroll('left')" flex="main:center cross:center">
-      <i class="el-icon-arrow-left"></i>
-    </div>
-    <div v-if="isScroll" class="d2-theme-header-menu__next" flex-box="0" @click="scroll('right')" flex="cross:center">
-      <i class="el-icon-arrow-right"></i>
-    </div>
-  </div>
-</template>
-
-<script>
 import { throttle } from 'lodash'
 import { mapState } from 'vuex'
 import menuMixin from '../mixin/menu'
-import d2LayoutMainMenuItem from '../components/menu-item/index.vue'
-import d2LayoutMainMenuSub from '../components/menu-sub/index.vue'
+import { elMenuItem, elSubmenu } from '../libs/util.menu'
+
 export default {
   name: 'd2-layout-header-aside-menu-header',
   mixins: [
     menuMixin
   ],
-  components: {
-    'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
-    'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
+  render (createElement) {
+    return createElement('div', {
+      attrs: { flex: 'cross:center' },
+      class: { 'd2-theme-header-menu': true, 'is-scrollable': this.isScroll },
+      ref: 'page'
+    }, [
+      createElement('div', {
+        attrs: { class: 'd2-theme-header-menu__content', flex: '', 'flex-box': '1' },
+        ref: 'content'
+      }, [
+        createElement('div', {
+          attrs: { class: 'd2-theme-header-menu__scroll', 'flex-box': '0' },
+          style: { transform: `translateX(${this.currentTranslateX}px)` },
+          ref: 'scroll'
+        }, [
+          createElement('el-menu', {
+            props: { mode: 'horizontal', defaultActive: this.active },
+            on: { select: this.handleMenuSelect }
+          }, this.header.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, menu)))
+        ])
+      ]),
+      ...this.isScroll ? [
+        createElement('div', {
+          attrs: { class: 'd2-theme-header-menu__prev', flex: 'main:center cross:center', 'flex-box': '0' },
+          on: { click: () => this.scroll('left') }
+        }, [
+          createElement('i', { attrs: { class: 'el-icon-arrow-left' } })
+        ]),
+        createElement('div', {
+          attrs: { class: 'd2-theme-header-menu__next', flex: 'main:center cross:center', 'flex-box': '0' },
+          on: { click: () => this.scroll('right') }
+        }, [
+          createElement('i', { attrs: { class: 'el-icon-arrow-right' } })
+        ])
+      ] : []
+    ])
   },
   computed: {
     ...mapState('d2admin/menu', [
@@ -120,4 +131,3 @@ export default {
     window.removeEventListener('load', this.checkScroll)
   }
 }
-</script>

src/layout/header-aside/components/menu-side/index.js

@@ -1,37 +1,27 @@
-<template>
-  <div class="d2-layout-header-aside-menu-side">
-    <el-menu
-      :collapse="asideCollapse"
-      :unique-opened="true"
-      :default-active="active"
-      ref="menu"
-      @select="handleMenuSelect">
-      <template v-for="(menu, menuIndex) in aside">
-        <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
-        <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
-      </template>
-    </el-menu>
-    <div v-if="aside.length === 0 && !asideCollapse" class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
-      <d2-icon name="inbox"/>
-      <span>没有侧栏菜单</span>
-    </div>
-  </div>
-</template>
-
-<script>
 import { mapState } from 'vuex'
 import menuMixin from '../mixin/menu'
-import d2LayoutMainMenuItem from '../components/menu-item/index.vue'
-import d2LayoutMainMenuSub from '../components/menu-sub/index.vue'
+import { elMenuItem, elSubmenu } from '../libs/util.menu'
 import BScroll from 'better-scroll'
+
 export default {
   name: 'd2-layout-header-aside-menu-side',
   mixins: [
     menuMixin
   ],
-  components: {
-    'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
-    'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
+  render (createElement) {
+    return createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [
+      createElement('el-menu', {
+        props: { collapse: this.asideCollapse, uniqueOpened: true, defaultActive: this.active },
+        ref: 'menu',
+        on: { select: this.handleMenuSelect }
+      }, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, menu))),
+      ...this.aside.length === 0 && !this.asideCollapse ? [
+        createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-empty', flex: 'dir:top main:center cross:center' } }, [
+          createElement('d2-icon', { props: { name: 'inbox' } }),
+          createElement('span', {}, '没有侧栏菜单')
+        ])
+      ] : []
+    ])
   },
   data () {
     return {
@@ -96,4 +86,3 @@ export default {
     }
   }
 }
-</script>