第一步:首先页面中写两个按钮,并设置点击事件
<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 启动(需结合本地数据库)