效果图:
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';
更多样式参考:
Vue中使用vue2-perfect-scrollbar制作滚动条
element-ui 实现响应式导航栏的示例代码
到此这篇关于vue移动端时弹出侧边抽屉菜单的文章就介绍到这了,更多相关vue弹出侧边抽屉菜单内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!