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

d2-projects · Jul 29, 2019 · ce6169d · ce6169d
1 parent a75aacf
commit ce6169d
Showing 1 changed file with 64 additions and 21 deletions.
diff --git a/src/layout/header-aside/components/menu-header/index.vue b/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