关于javascript:在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      }    },  },