vue展开折叠侧导航栏

Vue展开折叠导航栏出现的问题（click触发两次）以及替换策略

1. 整合elementUI的导航栏出现的问题

壹

打开所给模板代码来看

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>

主要的控制左侧导航栏的便是el-radio-group组件的label绑定的值，在开发过程中，由于想要将两个按钮合为一个按钮，因而在该组件绑定了click事件，但由于该组件自身封装了一次click事件，因而执行时采用@click.native来调用自定义方法。

贰

在使用click事件后，发现click事件触发了两次，（先附上click事件函数的代码）

flagFun(){
            
          this.flags=!this.flags
          console.log(this.isCollapse)
     //     return this.flags
    }

在尝试分析方法后，使用click.native.once，发现该点击事件在一次页面刷新事件只会执行一次，因而需要寻找替换方法

2.页面导航栏的展开折叠替换方法

使用双button，在展开时隐藏折叠按钮，在折叠时隐藏展开按钮，通过isCollpose属性的变化来对展开折叠做隐藏操作

<el-radio-group v-model="isCollapse" style="margin-bottom: 10px;margin-top:10px">
                <el-radio-button :label="false" v-show="true === isCollapse">展</el-radio-button>
                <el-radio-button :label="true" v-show="false === isCollapse">收</el-radio-button>
            </el-radio-group>

这是由于isCollpose属性会随着导航栏的是否展开进行true false的变化。

展开

折叠后