Vue侧边栏缩放按钮效果实现

第一步：首先页面中写两个按钮，并设置点击事件

 <el-tooltip class="item" effect="light" :content="isFold ? '展开导航' : '折叠导航'" placement="top-start">
      <div class="icons">
        <i class="el-icon-s-fold" @click="fold" v-show="!isFold"></i>
        <i class="el-icon-s-unfold" @click="unfold" v-show="isFold"></i>
      </div>
 </el-tooltip>

第二步：方法中去配置  并利用$emit 向父组件（一边侧边栏相对按钮都是父组件）传值

 // 点击折叠导航
    fold() {
      this.isFold = true
      this.$emit('fold', this.isFold)
      this.$nextTick(() => {
        this.initMychart()
      })
    },
    // 点击展开导航
    unfold() {
      this.isFold = false
      this.$emit('fold', this.isFold)
      this.$nextTick(() => {
        this.initMychart()
      })
    },

第三步：在父组件中接收（忘了子向父传值，就翻本人教程）

第四步：在父组件的方法中配置 fn函数  （ fn携带的值是true 或 false）

第五步：在侧边栏中加入代码：

 

 完成：详情参见  D:\myworks\VUE\works\vue-project0920 项目中查看   src文件下  npm run serve 启动（需结合本地数据库）