关于javascript:在Vue中实现左侧导航的收起与展开

32次阅读

共计 709 个字符，预计需要花费 2 分钟才能阅读完成。

在初始化页面时依据可视窗口的宽度决定是否暗藏左侧的导航栏
点击切换按钮时切换左侧导航的状态

首先实现动态页面布局，左侧局部应用 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}
    },
  },

正文完