el-tabs如何阻止标签页切换？

Question

在使用 Element Plus 的 `el-tabs` 组件时，如何阻止用户在满足特定条件前切换标签页？常见于表单未保存场景，需在标签切换前进行校验。虽然 `el-tabs` 提供了 `before-leave` 钩子，但部分开发者不熟悉其用法，导致无法正确阻止切换。如何通过 `before-leave` 返回 `Promise` 或 `false` 来控制标签页切换行为，是实际开发中的典型问题。

Answer 1

1. 问题背景与场景分析

在现代前端开发中，使用标签页（Tabs）组织内容是常见的 UI 模式。Element Plus 提供了 el-tabs 组件用于实现多标签切换功能。然而，在涉及表单编辑的复杂页面中，用户可能在未保存数据的情况下尝试切换标签页，导致数据丢失。

典型场景包括：

• 用户在“基本信息”标签页填写表单，尚未保存即点击“联系方式”标签。
• 多个标签页各自包含独立表单，需防止因误操作造成未提交数据丢失。
• 需要异步校验（如调用 API 校验字段唯一性）后才允许切换。

Element Plus 的 before-leave 钩子为此类需求提供了拦截机制，但其行为依赖返回值类型，若理解不清易导致控制失效。

2. 基础语法：before-leave 钩子的基本用法

before-leave 是一个事件回调函数，接收两个参数：activeName（即将激活的标签名）和 oldActiveName（当前激活的标签名）。通过返回特定值来决定是否继续切换。

支持的返回策略如下：

返回值类型	行为说明
true 或无返回	允许切换
false	阻止切换
Promise<boolean>	根据 resolve 结果决定是否切换

3. 实现方式一：同步判断与布尔返回

最简单的阻止方式是基于当前状态直接返回 false。例如检查某个表单是否处于“已修改但未保存”状态。

<template>
  <el-tabs v-model="activeTab" :before-leave="handleBeforeLeave">
    <el-tab-pane label="基本信息" name="basic"></el-tab-pane>
    <el-tab-pane label="详细信息" name="detail"></el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('basic')
const isFormDirty = ref(false) // 表示表单是否被修改

const handleBeforeLeave = (newTab, oldTab) => {
  if (isFormDirty.value) {
    return window.confirm('表单未保存，确定要离开吗？')
  }
  return true
}
</script>

4. 实现方式二：异步校验与 Promise 控制

当需要进行异步操作（如防抖校验、API 请求）时，before-leave 可返回一个 Promise，此时组件会等待 Promise 解析后再决定是否切换。

const handleBeforeLeave = (newTab, oldTab) => {
  if (!isFormDirty.value) return true

  return new Promise((resolve) => {
    ElMessageBox.confirm(
      '当前表单未保存，是否离开？',
      '提示',
      {
        confirmButtonText: '保存并离开',
        cancelButtonText: '取消',
        distinguishCancelAndClose: true,
        type: 'warning'
      }
    )
      .then(() => saveForm().then(() => resolve(true)))
      .catch((action) => {
        if (action === 'cancel') {
          resolve(false)
        } else {
          resolve(true) // close 视为同意离开
        }
      })
  })
}

5. 高级模式：结合 Vuex/Pinia 状态管理

在大型应用中，表单状态可能由全局状态管理工具维护。此时可在 before-leave 中订阅模块状态。

• 从 Pinia store 获取当前表单脏检查标志。
• 触发 action 进行批量校验。
• 统一处理多个标签页间的依赖关系。

示例代码片段：

import useFormStore from '@/stores/form'

const formStore = useFormStore()

const handleBeforeLeave = async (newTab) => {
  if (!formStore.isDirty) return true

  const result = await formStore.validateOnLeave()
  return result
}

6. 流程图：标签切换拦截逻辑

graph TD
    A[用户点击新标签] --> B{before-leave 触发}
    B --> C[检查表单是否 dirty]
    C -- 否 --> D[允许切换]
    C -- 是 --> E[弹出确认对话框]
    E --> F{用户选择}
    F -- 保存并离开 --> G[调用 save API]
    G --> H{保存成功?}
    H -- 是 --> I[切换标签]
    H -- 否 --> J[停留在原标签]
    F -- 取消 --> K[阻止切换]

7. 注意事项与最佳实践

使用 before-leave 时应注意以下几点：

1. 避免在钩子内执行阻塞操作，应使用异步模式提升用户体验。
2. 确保所有路径都有明确的返回值，否则默认放行。
3. 对于动态生成的 tab pane，注意 key 值绑定以避免状态错乱。
4. 可结合 debounce 对频繁输入做优化，减少误判。
5. 国际化项目中，提示语应使用 i18n 工具统一管理。
6. 移动端需测试 Touch 事件兼容性。
7. 调试时可通过打印日志观察钩子调用顺序。

8. 扩展思路：自定义指令封装复用逻辑

为提高可维护性，可将通用的“带保存确认的标签切换”逻辑封装为自定义指令或 Composition API 函数。

// composables/useTabGuard.js
export function useTabGuard(isDirty, onSave) {
  return (newTab, oldTab) => {
    if (!isDirty.value) return true
    return new Promise(resolve => {
      ElMessageBox.confirm('离开将丢失未保存内容', '确认', { type: 'warning' })
        .then(async () => {
          try {
            await onSave()
            resolve(true)
          } catch {
            resolve(false)
          }
        })
        .catch(() => resolve(false))
    })
  }
}