51b6229efe
在昨天的基础上： 1. 引入了flex.css，这个工具可以在实际开发中继续方便快速构建业务页面 —— 可以加一个页面说明 2. 将布局的部分从样式中脱离出来，在html里一目了然。 3. 测试情况： 测试环境：Chrome，IE11，Edge —— 显示正常 —— 边框没有1px的问题 —— 标签过多显示正常 Former-commit-id: ed2ba5a009542d7ac1567c42445ba0cf0cf3b6f9 [formerly 175c91524fec7b37b134643b51eab50e4e9c2bc7] [formerly ed2ba5a009542d7ac1567c42445ba0cf0cf3b6f9 [formerly 175c91524fec7b37b134643b51eab50e4e9c2bc7] [formerly ed2ba5a009542d7ac1567c42445ba0cf0cf3b6f9 [formerly 175c91524fec7b37b134643b51eab50e4e9c2bc7] [formerly 175c91524fec7b37b134643b51eab50e4e9c2bc7 [formerly 75fc769098a2dd22f2570580e1e38a9211ba59a3 [formerly f5bb3ce14be07f93eeb61ef9b88df0a63a01a491]]]]] Former-commit-id: 4ffb48d759ea3ba129aeeb77cfefb7b86fd91c76 Former-commit-id: f882c1ae2673b927ceb11f6eadeff0b43d5660d2 Former-commit-id: 0fec60f6d05afe04465adf11b0f3130c4b454b58 [formerly 072223429c32f5c05283726b1b5ad67cc7a6054b] Former-commit-id: 7f6b6f9f23a0379c39bbedf03fe6520d437747ac Former-commit-id: 9d55f0ff8170414c478360c6dddd74dafcc50e17 Former-commit-id: 3e81c2411638572ae500f07f2efb9976e8c1e710 Former-commit-id: b82c259e86a5a604901a12128a768da8262581b0 Former-commit-id: b0152867003988582a71dc6797f74f9189c7e051
95 lines
2.4 KiB
Vue
95 lines
2.4 KiB
Vue
<template>
|
|
<div class="d2-layout-header-aside-menu-side">
|
|
<el-menu
|
|
:collapse="isMenuAsideCollapse"
|
|
:unique-opened="true"
|
|
:default-active="active"
|
|
ref="menu"
|
|
@select="handleMenuSelect">
|
|
<template v-for="(menu, menuIndex) in menuAside">
|
|
<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="menuAside.length === 0 && !isMenuAsideCollapse" 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({
|
|
menuAside: state => state.d2admin.menuAside,
|
|
isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse
|
|
})
|
|
},
|
|
watch: {
|
|
// 折叠和展开菜单的时候销毁 better scroll
|
|
isMenuAsideCollapse (val) {
|
|
this.scrollDestroy()
|
|
setTimeout(() => {
|
|
this.scrollInit()
|
|
}, 500)
|
|
},
|
|
// 监听路由 控制侧边栏激活状态
|
|
'$route.matched': {
|
|
handler (val) {
|
|
this.active = val[val.length - 1].path
|
|
this.$nextTick(() => {
|
|
if (this.menuAside.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>
|