feat: 1.9.1

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

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

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

@@ -8,39 +8,39 @@ export default {
   mixins: [
     menuMixin
   ],
-  render (createElement) {
-    return createElement('div', {
+  render (h) {
+    return h('div', {
       attrs: { flex: 'cross:center' },
       class: { 'd2-theme-header-menu': true, 'is-scrollable': this.isScroll },
       ref: 'page'
     }, [
-      createElement('div', {
+      h('div', {
         attrs: { class: 'd2-theme-header-menu__content', flex: '', 'flex-box': '1' },
         ref: 'content'
       }, [
-        createElement('div', {
+        h('div', {
           attrs: { class: 'd2-theme-header-menu__scroll', 'flex-box': '0' },
           style: { transform: `translateX(${this.currentTranslateX}px)` },
           ref: 'scroll'
         }, [
-          createElement('el-menu', {
+          h('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.header.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, h, menu)))
         ])
       ]),
       ...this.isScroll ? [
-        createElement('div', {
+        h('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' } })
+          h('i', { attrs: { class: 'el-icon-arrow-left' } })
         ]),
-        createElement('div', {
+        h('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' } })
+          h('i', { attrs: { class: 'el-icon-arrow-right' } })
         ])
       ] : []
     ])

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

@@ -8,17 +8,17 @@ export default {
   mixins: [
     menuMixin
   ],
-  render (createElement) {
-    return createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [
-      createElement('el-menu', {
-        props: { collapse: this.asideCollapse, uniqueOpened: true, defaultActive: this.$route.fullPath },
+  render (h) {
+    return h('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [
+      h('el-menu', {
+        props: { collapse: this.asideCollapse, collapseTransition: this.asideTransition, uniqueOpened: true, defaultActive: this.$route.fullPath },
         ref: 'menu',
         on: { select: this.handleMenuSelect }
-      }, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, menu))),
+      }, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, h, 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', {}, '没有侧栏菜单')
+        h('div', { attrs: { class: 'd2-layout-header-aside-menu-empty', flex: 'dir:top main:center cross:center' } }, [
+          h('d2-icon', { props: { name: 'inbox' } }),
+          h('span', {}, '没有侧栏菜单')
         ])
       ] : []
     ])
@@ -32,7 +32,8 @@ export default {
   computed: {
     ...mapState('d2admin/menu', [
       'aside',
-      'asideCollapse'
+      'asideCollapse',
+      'asideTransition'
     ])
   },
   watch: {

src/layout/header-aside/layout.vue

@@ -6,7 +6,11 @@
     <div class="d2-layout-header-aside-content" flex="dir:top">
       <!-- 顶栏 -->
       <div class="d2-theme-header" :style="{ opacity: this.searchActive ? 0.5 : 1 }" flex-box="0" flex>
-        <router-link to="/index" class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}" flex-box="0">
+        <router-link
+          to="/index"
+          :class="{'logo-group': true, 'logo-transition': asideTransition}"
+          :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}"
+          flex-box="0">
           <img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
           <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
         </router-link>
@@ -30,7 +34,14 @@
       <!-- 下面 主体 -->
       <div class="d2-theme-container" flex-box="1" flex>
         <!-- 主体 侧边栏 -->
-        <div flex-box="0" ref="aside" class="d2-theme-container-aside" :style="{ width: asideCollapse ? asideWidthCollapse : asideWidth, opacity: this.searchActive ? 0.5 : 1 }">
+        <div
+          flex-box="0"
+          ref="aside"
+          :class="{'d2-theme-container-aside': true, 'd2-theme-container-transition': asideTransition}"
+          :style="{
+            width: asideCollapse ? asideWidthCollapse : asideWidth,
+            opacity: this.searchActive ? 0.5 : 1
+          }">
           <d2-menu-side/>
         </div>
         <!-- 主体 -->
@@ -109,7 +120,8 @@ export default {
       keepAlive: state => state.page.keepAlive,
       grayActive: state => state.gray.active,
       transitionActive: state => state.transition.active,
-      asideCollapse: state => state.menu.asideCollapse
+      asideCollapse: state => state.menu.asideCollapse,
+      asideTransition: state => state.menu.asideTransition
     }),
     ...mapGetters('d2admin', {
       themeActiveSetting: 'theme/activeSetting'