5ab76e40b6
Former-commit-id: 8e5f8771f72201a004394e1023aa32db505e99f5 [formerly 8e5f8771f72201a004394e1023aa32db505e99f5 [formerly 8e5f8771f72201a004394e1023aa32db505e99f5 [formerly 8e5f8771f72201a004394e1023aa32db505e99f5 [formerly 82f392f3dcfd6330d93166753d315281f2c1ab22 [formerly 40f46e5f03c81cea2c7318b63a13c8bb7437e313]]]]] Former-commit-id: 5e32dca8505362087b0d5da989a0477921094717 Former-commit-id: e35dd9f7641400071df1d8825b783ed829beaff5 Former-commit-id: 9de2cdc0677db206b7abb487b9593fb9ff5dd2ea [formerly 864bfbcb3c25bcddae4ed4df9e769e8faed3dce9] Former-commit-id: 72680620cbfc6780e2f8fee25ebb07d127bcd519 Former-commit-id: 9cf0ad163189304fbc62478969e0a4d700457f4e Former-commit-id: ac479e2d905ff534a5e3e2f484089bf2cb2f37a1 Former-commit-id: f866071615cfe13b277d629a284ce278b03275df Former-commit-id: 5c752efe5623fdbf791f96adc2a90ba46590a83b
100 lines
2.5 KiB
Vue
100 lines
2.5 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,
|
|
click: 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>
|