You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
1.8 KiB
90 lines
1.8 KiB
<template>
|
|
<scroll-view class="sidebar" :class="classCom" scroll-y="true" v-loading="!vk.getVuex('$app.inited')" :style="styleCom">
|
|
<vk-data-menu-nav
|
|
v-if="vk.getVuex('$app.inited')"
|
|
:data="vk.getVuex('$app.navMenu')"
|
|
:unique-opened="true"
|
|
:collapse="vk.getVuex('$app.leftCollapse')"
|
|
:collapse-transition="false"
|
|
:theme="theme"
|
|
default-menu-icon="el-icon-folder-opened"
|
|
default-sub-menu-icon="el-icon-tickets"
|
|
@select="select"
|
|
></vk-data-menu-nav>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from "@/app.config.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
theme: config.theme
|
|
}
|
|
},
|
|
methods: {
|
|
select(e){
|
|
|
|
},
|
|
},
|
|
// 监听属性
|
|
watch: {
|
|
$route: {
|
|
immediate: true,
|
|
handler(newRoute, oldRoute) {
|
|
let that = this;
|
|
let { vk } = that;
|
|
let { path , query } = newRoute;
|
|
let url = path + vk.pubfn.queryParams(query);
|
|
let route = { path, query, url };
|
|
vk.setVuex('$app.route', route);
|
|
}
|
|
}
|
|
},
|
|
// 计算属性
|
|
computed: {
|
|
styleCom(){
|
|
let theme = this.theme;
|
|
if (theme && theme.use) {
|
|
return theme[theme.use].leftMenu;
|
|
} else {
|
|
return {};
|
|
}
|
|
},
|
|
classCom(){
|
|
let obj = {
|
|
pc: vk.getVuex('$app.isPC'),
|
|
mobile: !vk.getVuex('$app.isPC'),
|
|
collapse: vk.getVuex('$app.leftCollapse'),
|
|
};
|
|
return obj;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.sidebar {
|
|
position: fixed;
|
|
top: var(--window-top);
|
|
width: 240px;
|
|
height: calc(100vh - (var(--window-top)) + 50px);
|
|
box-sizing: border-box;
|
|
box-shadow: var(--boxShadow, 2px 0 0px rgba(0,21,4,0.2));
|
|
border-top: var(--borderTop);
|
|
background-color: $left-window-bg-color;
|
|
padding-bottom: 10px;
|
|
top: 50px;
|
|
z-index: 998;
|
|
}
|
|
.sidebar.collapse{
|
|
width: 64px;
|
|
}
|
|
.title {
|
|
margin-left: 5px;
|
|
}
|
|
.center{
|
|
text-align: center;
|
|
margin-top: 100px;
|
|
}
|
|
</style>
|