在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
      }
    },
  },