tabs标签页在切换的时候进行提示,点击确定执行,点击取消不切换
element文档:before-leave切换标签之前的钩子,若返回 false 或者返回 Promise 且被 reject,则阻止切换。
这里有个坑就是直接return false 不生效,用 Promise 的reject的才能阻止
<template>
<div style="width: calc(100% - 558px); text-align: left; flex: 1">
<el-tabs
type="card"
v-model="current"
:before-leave="changeHeader"
>
<el-tab-pane
v-for="item in list"
:label="item.title"
:key="item.name"
:name="item.path"
></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
};
},
mounted() {
},
methods: {
// 导航栏切换菜单
changeHeaderMenu(tab) {
var p = new Promise((resolve, reject) => {
this.$confirm("您页面有修改,是否继续跳转?", {
confirmButtonText: "确实",
cancelButtonText: "取消",
type: "warning",
})
.then(async () => {
resolve();
this.changeFun(tab);
})
.catch(() => {
// throw new Error('取消成功!')
return reject();
});
});
return p;
},
},
};
</script>