将原来的写法改为使用 render 函数 为下一步做准备

Former-commit-id: ff3cb51a95bd2f734a72192c611f476e68a8e311 [formerly 31eb3f274c17348e3130fed031505824f4b83a46] [formerly ff3cb51a95bd2f734a72192c611f476e68a8e311 [formerly 31eb3f274c17348e3130fed031505824f4b83a46] [formerly ff3cb51a95bd2f734a72192c611f476e68a8e311 [formerly 31eb3f274c17348e3130fed031505824f4b83a46] [formerly 31eb3f274c17348e3130fed031505824f4b83a46 [formerly c5ec9f17b9f317e537af2b2e1693d58666822286 [formerly 6753d06d2b45fb0d34ea6c78e4a90355538e8508]]]]]
Former-commit-id: 75b2ae7b2598023f4c97d3227d5b0ff34baadbb5
Former-commit-id: 460557870e117d374b32b3ce591abf3ed3685e85
Former-commit-id: f2b7b4ab565944fb350fda884963b273e50b9422 [formerly e696efa18d8be165fb36249b355a20f3cbd4b98c]
Former-commit-id: 7c248901bb448b04ea7586a388a5b1f3f280be2e
Former-commit-id: f58fc63e6d8727d711e0155787015cbf40e79533
Former-commit-id: 1a1d606440a65f5dc2c017aeccc977fbbbc23678
Former-commit-id: dd1389daaff93482164ed7fa200db41342b28f7f
Former-commit-id: d0cb0399b70dd2233a1bd27ffbe25f9f696e8328

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

@@ -1,24 +1,3 @@
-<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'
@@ -30,6 +9,70 @@ export default {
   mixins: [
     menuMixin
   ],
+  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 => {
+            if (menu.children === undefined) {
+              return createElement('d2-layout-header-aside-menu-item', { props: { menu } })
+            } else {
+              return createElement('d2-layout-header-aside-menu-sub', { props: { 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' } })
+        ]),
+      ] : []
+    ])
+  },
   components: {
     'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
     'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub