fecc0fed0e
Former-commit-id: d40c51afd20ff6c8b75343b110c4a885494d13d6 [formerly d40c51afd20ff6c8b75343b110c4a885494d13d6 [formerly d40c51afd20ff6c8b75343b110c4a885494d13d6 [formerly d40c51afd20ff6c8b75343b110c4a885494d13d6 [formerly 8e89c9de19c7589bfef2ed381c4d04e5ffa10342 [formerly 43a6b0713d5f72c905ec7115dee22d64349905bc]]]]] Former-commit-id: 7f951c4f7afbcde61758bc064d58b48a27f60b2e Former-commit-id: 3ae33b4cb8fd3a6e217ea188db468378ec45a755 Former-commit-id: c1fbcedaf8f0742871894db45bc4f5fdd0a81401 [formerly fc2d9e0c6f21015a6a40af6baa2ea77cfe6e07d2] Former-commit-id: a4fb93d4c675d59173e6a44897a17f27c36f7cea Former-commit-id: e1d7b3b4afc1221bfc31a8079b05b1cc0bf2ee3e Former-commit-id: 78de6f0e3afe650160da32723a88e8d5337fbbf2 Former-commit-id: 1e79f8a1bb257fba62c3a711741f788e2f61cb8e Former-commit-id: d6563a9fbd5956d549fa6dc7ae36045d922da1fb
99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
<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 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
|
|
},
|
|
data () {
|
|
return {
|
|
active: '',
|
|
asideHeight: 300,
|
|
BS: null
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('d2admin/menu', [
|
|
'aside',
|
|
'asideCollapse'
|
|
])
|
|
},
|
|
watch: {
|
|
// 折叠和展开菜单的时候销毁 better scroll
|
|
asideCollapse (val) {
|
|
this.scrollDestroy()
|
|
setTimeout(() => {
|
|
this.scrollInit()
|
|
}, 500)
|
|
},
|
|
// 监听路由 控制侧边栏激活状态
|
|
'$route': {
|
|
handler ({ fullPath }) {
|
|
this.active = fullPath
|
|
this.$nextTick(() => {
|
|
if (this.aside.length > 0 && this.$refs.menu) {
|
|
this.$refs.menu.activeIndex = fullPath
|
|
}
|
|
})
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted () {
|
|
this.scrollInit()
|
|
},
|
|
beforeDestroy () {
|
|
this.scrollDestroy()
|
|
},
|
|
methods: {
|
|
scrollInit () {
|
|
this.BS = new BScroll(this.$el, {
|
|
mouseWheel: true
|
|
// 如果你愿意可以打开显示滚动条
|
|
// scrollbar: {
|
|
// fade: true,
|
|
// interactive: false
|
|
// }
|
|
})
|
|
},
|
|
scrollDestroy () {
|
|
// https://github.com/d2-projects/d2-admin/issues/75
|
|
try {
|
|
this.BS.destroy()
|
|
} catch (e) {
|
|
delete this.BS
|
|
this.BS = null
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|