最近做了一个项目，tabs选项卡 需要在离开当前的选中的项时进行提示并且当取消时定位原位置。
看效果图 当我进行编辑时 触发编辑 但是没有进行保存即提示信息。取消后返回原tabs ,否则确认后进入下个tab。

上代码

tab 一般默认会有一个值，一把是第一个
然后记录需要两个事件
@tab-click=“editChangeInex” @before-leave=“leaveTab”

我这里是详情和编辑公用了同一个页面，所以进行了赋值判断 详情 和 编辑 操作。
因为当我拒绝离开时是默认回转到详情页面的。详情是不进行提示的。

/** tab切换栏: 当前选择条数 */
const currenItem = ref(0)
/** 是否 编辑记录 */
const isEdit = ref(false)/** 编辑按钮 权限判定 */
let changeBut = ref('查看')
const editBtn = () => {changeBut.value = '编辑'if (isProjectRun.value && isMyself.value) isEdit.value = true// 权限判断 提示条件if (!isMyself.value) isShowTipCard.value = trueif (!isProjectRun.value) isShowTipCard.value = true
}
let oldActiveName = currenItem.value
const editChangeInex = (val:any) =>{if(changeBut.value==='编辑'){ElMessageBox.confirm('您有未保存数据项, 是否确认离开? 离开后数据不做变更','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {//确定切换，切换到下一个 并关闭编辑状态转为详情查看currenItem.value = Number(val.index)oldActiveName = currenItem.valueisEdit.value = !isEdit.valuechangeBut.value='查看'}).catch(() => {//取消切换返回上一个console.log(oldActiveName, 'oldActiveName');currenItem.value = oldActiveName oldActiveName = currenItem.value})}else {currenItem.value = Number(val.index)oldActiveName = currenItem.value}
}
const leaveTab = (newValue:any, oldValue:any) =>{// console.log('切换前的Tab:', newValue, '切换后的Tab:', oldValue)oldActiveName = oldValue
}