Vue3 el-tabs 切换记录选项卡，离开前提示

最近做了一个项目，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 = true
  if (!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.value
      isEdit.value = !isEdit.value
      changeBut.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
}