这个需求困扰了我几天,因为我的需求是tab切换前判断当前页是否有未保存的内容,有未保存的内容要提示未保存,用户选择离开才可以切换tab。
百度了一大圈,只有一篇说如何拦截阻断element-ui里的tab,有一个触发前的钩子函数,将逻辑写在这个函数里
搜不到和antd-vue 的tab拦截阻断有关的办法,有几篇提问的文章前两年问的,一直没有人回复过。
抱着试试的态度,我自己发了问答贴,感谢热心的大佬提供了回答。
如果你也遇到了类似的需求,并且看到我这篇文章,我觉得你可以试试他们说的思路,我自己想了一下觉得不太适合我自己,经过朋友的帮助,想出了另一种解决的思路。
思路大致如下:
利用vuex保存数据的特性,在state中定义数据,在mutations中修改数据,只能使用vuex内部的方法改变数据这一点很重要,将tab的activeKey对应vuex中保存的数据,当未保存提示后,确认可以切换的时候,触发vuex保存数据的方法,将点击项的key传到方法里,这样tab绑的值都是通过手动改变。
下面就是具体的代码实现了,只保留和切换有关的,其他的就不展示了,没有必要去理解我整个的项目需求,功能能实现就行
首先在state文件夹的index文件中定义数据和操作数据的方法
state: {
active: 0,
},
mutations: {
Update_active(state,data){
state.active = data
},
}
在tab所在的页面,给activakey绑值
<a-tabs
:activeKey="$store.state.active"
:tabBarStyle="{ padding: '0 24px' }"
@change="(key) => onTabChange(key)"
>
<a-tab-pane :key="0" tab="xxx" style="padding: 0 28px">
<api-info-editor ref="one" v-if="$store.state.active == 0"></api-info-editor>
</a-tab-pane>
<a-tab-pane :key="1" tab="xxx" style="padding: 0 28px">
<api-docs-editor
v-if="$store.state.active == 1"
ref="second"
></api-docs-editor>
</a-tab-pane>
<a-tab-pane :key="2" tab="xxx" style="padding: 0">
<api-parameter-config
v-if="$store.state.active == 2"
ref="three"
></api-parameter-config>
</a-tab-pane>
</a-tabs>
在onTabChange事件里改变值
onTabChange(key) {
switch (this.$store.state.active) {
case 0:
if (this.$refs.one.apichooseFlag) {
this.$confirm(`你有未保存数据项, 是否确认离开?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
// 改变vuex的值
this.$store.commit('Update_active', key)//如果确认离开,改变vuex的值并且刷新数据
this.getDetaildata(this.documents || { fInApibaseId: this.$route.query.apiId })
})
} else {
this.$store.commit('Update_active', key)//如果取消,还是要重新保存一下值
}
break
case 1:
if (this.$refs.second.apidocsFlag) {
this.$confirm(`你有未保存数据项, 是否确认离开?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.$store.commit('Update_active', key)
this.getquerydocs()
this.$refs.second.apidocsFlag = false
})
} else {
this.$store.commit('Update_active', key)
}
break
case 2:
if (this.$refs.three.apiparamFlag) {
this.$confirm(`你有未保存数据项, 是否确认离开?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.$store.commit('Update_active', key)
this.$refs.three.apiparamFlag = false
this.getDetaildata(this.documents || { fInApibaseId: this.$route.query.apiId })
})
} else {
this.$store.commit('Update_active', key)
}
break
default:
break
}
},