- el-menu标签加上collapse属性,绑定变量isCollapse(属性值为boolean类型),通过变量控制收缩展开
<el-menu :collapse="isCollapse">
- 审查元素查看折叠后元素的宽度
- 再通过三元表达式和isCollapse控制宽度
<el-aside :width="isCollapse?'60px':'150px'">
- 加个按钮控制展开折叠,为了提高用户体验可以在鼠标移上的时候加提示文字
<el-tooltip
effect="dark"
content="展开与折叠"
placement="right"
>
<div class="fold" @click="clickFold">
<i class="el-icon-d-arrow-left" v-show="!isCollapse"></i>
<i class="el-icon-d-arrow-right" v-show="isCollapse"></i>
</div>
</el-tooltip>
data() {
return {
isCollapse: false
};
},
methods: {
// 展开和折叠菜单
clickFold(){
this.isCollapse = !this.isCollapse
}}