问题:
老旧项目使用tabs组件切换时,弹出弹窗,也就是改变一个flag值,但是veui1.0的官方文档中没有任何关于click和change的api事件,无法直接了当的改变弹窗显隐值flag
失败的解决方案:
- click&change,分别在tabs和tab上都实验过了
- watch:在tabs上使用v-model绑定值activeTab,监听activeTab变化,activeTab没有值
- tabs上有
html
<veui-tabs :index.sync="index">
可以看到当前tab的index,使用mounted和update生命周期的钩子函数判断index值,结果是能改变flag,但是每次组件更新时,updated 钩子都会运行,这会使得 flag 状态被不断重置,无法修改
成功的方案:
- 使用 computed 计算属性,计算当前index值是否等于1,返回true或false,监听这个值来赋给弹窗的flag
javascript
computed: {
isFinanTabActive() {
return this.index === 1;
}
},
watch: {
isFinanTabActive(newValue) {
this.flag = newValue;
}
}