03337140be
Former-commit-id: d7010f02783505101c190835398a7c37eb307b55 [formerly d7010f02783505101c190835398a7c37eb307b55 [formerly d7010f02783505101c190835398a7c37eb307b55 [formerly d7010f02783505101c190835398a7c37eb307b55 [formerly a3290a545292ceb2b1919cdbacda986cf377725a [formerly 68f1acb63acc7b4d865d6f8ef291f5e3a0dc343c]]]]] Former-commit-id: c27bdeb76049a09c66ed9c7099482178669d8916 Former-commit-id: c17ffd2492fa3bbe035e1aff55f3a1f7a30fa865 Former-commit-id: 22bee1feb72768a03b09a7a152b8aadf4fadebb5 [formerly b85ad6c9f13e74b0d4982696986a2d4766c54a30] Former-commit-id: 2436d4d6c011e4a7a4caf4225023ab527edafe3b Former-commit-id: dabbec6015fb3389dca549b0aacdaa1ac5ba3b96 Former-commit-id: 20757fed0eef07b85e236f73803b2ab6862ecf7f Former-commit-id: 5952b4fb216126a1781baf8b8629d7cdaa73bf65 Former-commit-id: d3607c0521f90d7b368a0bb3de661010653f5041
84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
import { mapState } from 'vuex'
|
|
import menuMixin from '../mixin/menu'
|
|
import { elMenuItem, elSubmenu } from '../libs/util.menu'
|
|
import BScroll from 'better-scroll'
|
|
|
|
export default {
|
|
name: 'd2-layout-header-aside-menu-side',
|
|
mixins: [
|
|
menuMixin
|
|
],
|
|
render (createElement) {
|
|
return createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [
|
|
createElement('el-menu', {
|
|
props: { collapse: this.asideCollapse, uniqueOpened: true, defaultActive: this.active },
|
|
ref: 'menu',
|
|
on: { select: this.handleMenuSelect }
|
|
}, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, menu))),
|
|
...this.aside.length === 0 && !this.asideCollapse ? [
|
|
createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-empty', flex: 'dir:top main:center cross:center' } }, [
|
|
createElement('d2-icon', { props: { name: 'inbox' } }),
|
|
createElement('span', {}, this.$t('layout.header-aside.menu-side.empty'))
|
|
])
|
|
] : []
|
|
])
|
|
},
|
|
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.fullPath': {
|
|
handler (value) {
|
|
this.active = value
|
|
},
|
|
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
|
|
}
|
|
}
|
|
}
|
|
}
|