完善

Former-commit-id: 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 8c4098bcffd50089b041edcf9d539c64c3c92b16 [formerly 1bf5ee08c5424c0a4cedac421d52cf8c8393ae7f]]]]] Former-commit-id: 3aa6fad9f9c31f62376dfb27f62fa937d0735e55 Former-commit-id: d293c0b275dc8c4d439fa04a45d9d4efa1dd8f4c Former-commit-id: a737d8ff3f0c9d829e66a1cd305257961c551eda [formerly 4d2360f8b865bfab066291680106dc95df97ce2a] Former-commit-id: b64f59d9203d16e71bcd21065aba7ead88566938 Former-commit-id: 4350c691cdff708266be623edf8f1b9d61faeb02 Former-commit-id: 1dba1637790b1f2c87733adfdfcc8491a97bfd1d Former-commit-id: e17d989004ecb5fb7ce620103b997998da42b8d9 Former-commit-id: 3b781b9b28f6ed584b9c6dbfa5fafe3f8c1475b5
2018-07-17 21:54:38 +08:00
parent db62c21964
commit 14c921e6b1
214 changed files with 157 additions and 139 deletions
--- a/src/layout/header-aside/components/menu-side/index.vue
+++ b/src/layout/header-aside/components/menu-side/index.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="d2-layout-header-aside-menu-side">
+    <el-menu
+      :collapse="collapse"
+      :unique-opened="true"
+      :default-active="active"
+      ref="menu"
+      @select="handleMenuSelect">
+      <template v-for="(menu, menuIndex) in menus">
+        <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="menus.length === 0 && !collapse" class="d2-layout-header-aside-menu-empty">
+      <d2-icon name="hdd-o"/>
+      <span>当前目录没有菜单</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { side } from '@/menu/index.js'
+import menuMixin from '../mixin/menu'
+// 组件
+import d2LayoutMainMenuItem from '../components/menu-item/index.vue'
+import d2LayoutMainMenuSub from '../components/menu-sub/index.vue'
+// 插件
+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
+  },
+  props: {
+    collapse: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      menus: [],
+      active: '',
+      asideHeight: 300,
+      BS: null
+    }
+  },
+  watch: {
+    // 折叠和展开菜单的时候销毁 better scroll
+    collapse (val) {
+      this.scrollDestroy()
+      setTimeout(() => {
+        this.scrollInit()
+      }, 500)
+    },
+    '$route.matched': {
+      handler (val) {
+        const path = val[0].path
+        const _side = side.filter(menu => menu.path === path)
+        this.menus = _side.length > 0 ? _side[0].children : []
+        this.active = val[val.length - 1].path
+        this.$nextTick(() => {
+          if (this.menus.length > 0) {
+            this.$refs.menu.activeIndex = this.active
+          }
+        })
+      },
+      immediate: true
+    }
+  },
+  mounted () {
+    this.scrollInit()
+  },
+  beforeDestroy () {
+    this.scrollDestroy()
+  },
+  methods: {
+    scrollInit () {
+      this.BS = new BScroll(this.$el, {
+        mouseWheel: true,
+        scrollbar: {
+          fade: true,
+          interactive: false
+        }
+      })
+    },
+    scrollDestroy () {
+      if (this.BS) {
+        this.BS.destroy()
+      }
+    }
+  }
+}
+</script>