在Vue中实现左侧导航的收起与展开
需要达到的目的
- 在初始化页面时根据可视窗口的宽度决定是否隐藏左侧的导航栏
- 点击切换按钮时切换左侧导航的状态
效果展示
实现部分
首先实现静态页面布局,左侧部分使用fixed
绝对定位,右边部分则使用padding-left
<template>
<div class="home">
<div :class="[isOpen?'sider_open':'sider_close']">
this is sider
<p class="c-layout-sider-open-icon" @click="setWidth"></p>
</div>
<div :class="[isOpen?'c-layout-content-min':'c-layout-content-max']">
<div style="height:2000px">this is page content</div>
</div>
</div>
</template>
JS
部分则在mounted
的时候调用resize
函数并绑定页面的缩放事件
data() {
return {
isOpen: true,
}
},
mounted() {
console.log(window.innerWidth)
this.resize()
window.addEventListener('resize', this.resize, true)
},
methods: {
setWidth() {
this.isOpen = !this.isOpen
},
resize() {
let w_width = window.innerWidth
if(w_width<= 1430) {
this.isOpen = false
}else {
this.isOpen = true
}
},
},
转载自:https://segmentfault.com/a/1190000041997903