效果图:
aside.vue:
<template>
<div class="aside">
<div
style="
height: 60px;
background-color: #2e6baa;
line-height: 60px;
display: flex;
align-items: center;
justify-content: center;
"
>
<img
src="https://lj-common.oss-cn-chengdu.aliyuncs.com/vue.png"
style="width: 30px; height: 30px"
/>
<span
style="
font-size: 20px;
font-weight: 600;
color: white;
margin-left: 10px;
"
>xxx平台</span
>
</div>
<perfect-scrollbar>
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#017BC4"
text-color="white"
active-text-color="white"
>
<el-menu-item index="/page1" @click="$router.push({ path: '/page1' })">
<el-image
src="https://lj-common.oss-cn-chengdu.aliyuncs.com/vue.png"
style="width: 30px; height: 30px; margin-right: 5px"
></el-image>
<span slot="title">page1</span> </el-menu-item
><el-menu-item index="/page2" @click="$router.push({ path: '/page2' })">
<el-image
src="https://lj-common.oss-cn-chengdu.aliyuncs.com/vue.png"
style="width: 30px; height: 30px; margin-right: 5px"
></el-image>
<span slot="title">page2</span>
</el-menu-item>
</el-menu>
</perfect-scrollbar>
</div>
</template>
<script>
export default {
data() {
return {};
},
created() {},
computed: {},
methods: {},
};
</script>
<style lang='scss' scoped>
.aside {
height: 100vh;
.ps {
height: calc(100vh - 60px);
//展开时宽度
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 256px;
}
.el-menu {
height: 100%;
border: 0 !important; //垂直时,去除右侧白边
}
//item激活时的样式
.el-menu-item.is-active {
background-color: #1890ff !important;
border-bottom: 0 !important;
}
}
}
</style>
控制抽屉显隐:
<el-drawer
:visible.sync="drawer"
direction="ltr"
:with-header="false"
:size="256"
>
<vAside></vAside>
</el-drawer>
<i class="el-icon-s-unfold hidden-sm-and-up" @click="collapseChange"></i>
<script>
import vAside from "./aside.vue";
export default {
name: "home",
components: { vAside },
props: {},
data() {
return {
drawer: false,
};
},
methods: {
// 切换折叠状态
collapseChange() {
this.drawer = !this.drawer;
},
},
};
</script>
由于上面使用了hidden-sm-and-up样式,该样式需要在main.js中引入display.css,如下:
import 'element-ui/lib/theme-chalk/display.css';
由于还使用了perfect-scrollbar组件,故还需要下载该组件,参考: