需求

在切换tabs时，如果当前页面内容没有保存，则拦截切换并提示：“离开将不保存本页修改”的弹框

解决

1、tabs组件代码

1
2
3
4
5
6
7
8
<el-tabs v-model="activeTab" type="card" :before-leave="beforeLeave">
 	<el-tab-pane label="用户信息" name="basicInfo">
  		用户信息表单
 	</el-tab-pane>
 	<el-tab-pane v-if="code" label="用户角色" name="userRole">
  		用户角色列表
 	</el-tab-pane>
</el-tabs>

2、beforeLeave()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
beforeLeave(item) {
    var p = new Promise((resolve, reject) => {
    this.$confirm('离开将不保存本页修改', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 你可以在这儿做些操作
        resolve()
    }).catch(err => {
        // 你可以在这儿做些操作
        reject(err)
    })
    })
    return p
}