el-tabs详解

笨鸟先死
1,563 阅读4分钟

el-tabs 是 Element Plus 框架中的标签页组件，用于在一个页面中展示多个内容块，每个内容块对应一个标签。它常用于选项卡切换等场景。

一。 el-tabs 属性详解

  1. value / model-value:

    • 类型: String | Number
    • 用途: 当前激活标签页的 name。

  2. type:

    • 类型: String
    • 用途: 标签页的风格，可选值为 card、border-card。

  3. before-leave:

    • 类型: Function
    • 用途: 切换标签之前的钩子，参数为即将离开的标签的 name 和即将进入的标签的 name，若返回 false 或者返回 Promise 且被 reject，则阻止切换。

  4. addable:

    • 类型: Boolean
    • 用途: 是否可添加新标签。
    • 默认值: false

  5. editable:

    • 类型: Boolean
    • 用途: 是否可编辑标签。
    • 默认值: false

  6. stretch:

    • 类型: Boolean
    • 用途: 是否使标签等宽。
    • 默认值: false

  7. tab-position:

    • 类型: String
    • 用途: 标签的位置，可选值为 top、right、bottom、left。
    • 默认值: top

二。 el-tabs 事件详解

  1. input:

    • 类型: Function
    • 用途: 当绑定值变化时触发。
    • 参数: value（新的绑定值）

  2. tab-click:

    • 类型: Function
    • 用途: 点击标签时触发。
    • 参数: tab（被点击的标签对象）

  3. edit:

    • 类型: Function
    • 用途: 编辑标签（新增或删除）时触发。
    • 参数: targetName（被编辑的标签的 name），action（动作，可选值为 add、remove）

三。 el-tabs 插槽详解

  1. default:

    • 插槽名称: default
    • 用途: 自定义标签页的内容。

el-tab-pane 子组件

el-tab-pane 是 el-tabs 的子组件，用于定义具体的标签页。

一。 el-tab-pane 属性详解

  1. name:

    • 类型: String | Number
    • 用途: 标签页的唯一标识符。

  2. label:

    • 类型: String
    • 用途: 标签页的标题。

  3. disabled:

    • 类型: Boolean
    • 用途: 是否禁用标签页。
    • 默认值: false

  4. lazy:

    • 类型: Boolean
    • 用途: 是否懒加载标签页的内容。
    • 默认值: false

二。示例代码

<template>
  <div>
    <h2>Tabs 示例</h2>

    <!-- 基本用法 -->
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="用户管理" name="first">
        <p>用户管理的内容</p>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        <p>配置管理的内容</p>
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="third">
        <p>角色管理的内容</p>
      </el-tab-pane>
    </el-tabs>

    <!-- 卡片风格 -->
    <el-tabs v-model="activeName" type="card" @tab-remove="handleTabRemove">
      <el-tab-pane label="用户管理" name="first">
        <p>用户管理的内容</p>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        <p>配置管理的内容</p>
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="third" closable>
        <p>角色管理的内容</p>
      </el-tab-pane>
    </el-tabs>

    <!-- 可编辑标签 -->
    <el-tabs v-model="activeName" type="card" editable @tab-add="handleTabAdd" @tab-remove="handleTabRemove">
      <el-tab-pane label="用户管理" name="first">
        <p>用户管理的内容</p>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        <p>配置管理的内容</p>
      </el-tab-pane>
    </el-tabs>

    <!-- 水平标签 -->
    <el-tabs v-model="activeName" tab-position="left" style="height: 200px;">
      <el-tab-pane label="用户管理" name="first">
        <p>用户管理的内容</p>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        <p>配置管理的内容</p>
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="third">
        <p>角色管理的内容</p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const activeName = ref('first')

const handleTabClick = (tab) => {
  ElMessage({
    message: `点击了标签：${tab.props.label}`,
    type: 'success'
  })
}

const handleTabAdd = () => {
  ElMessage({
    message: '添加了新标签',
    type: 'info'
  })
}

const handleTabRemove = (targetName) => {
  ElMessage({
    message: `删除了标签：${targetName}`,
    type: 'warning'
  })
}
</script>

三。代码解释

  1. 基本用法:

    • 使用 el-tabs 组件并设置 v-model 绑定当前激活的标签页，使用 @tab-click 事件处理标签点击事件。
    • <el-tabs v-model="activeName" @tab-click="handleTabClick">
  <el-tab-pane label="用户管理" name="first">
    <p>用户管理的内容</p>
  </el-tab-pane>
  <el-tab-pane label="配置管理" name="second">
    <p>配置管理的内容</p>
  </el-tab-pane>
  <el-tab-pane label="角色管理" name="third">
    <p>角色管理的内容</p>
  </el-tab-pane>
</el-tabs>

  2. 卡片风格:

    • 使用 type="card" 属性设置标签页的风格为卡片风格，并使用 @tab-remove 事件处理标签删除事件。
    • <el-tabs v-model="activeName" type="card" @tab-remove="handleTabRemove">
  <el-tab-pane label="用户管理" name="first">
    <p>用户管理的内容</p>
  </el-tab-pane>
  <el-tab-pane label="配置管理" name="second">
    <p>配置管理的内容</p>
  </el-tab-pane>
  <el-tab-pane label="角色管理" name="third" closable>
    <p>角色管理的内容</p>
  </el-tab-pane>
</el-tabs>

  3. 可编辑标签:

    • 使用 editable 属性使标签页可编辑，并使用 @tab-add 和 @tab-remove 事件处理标签添加和删除事件。
    • <el-tabs v-model="activeName" type="card" editable @tab-add="handleTabAdd" @tab-remove="handleTabRemove">
  <el-tab-pane label="用户管理" name="first">
    <p>用户管理的内容</p>
  </el-tab-pane>
  <el-tab-pane label="配置管理" name="second">
    <p>配置管理的内容</p>
  </el-tab-pane>
</el-tabs>

  4. 水平标签:

    • 使用 tab-position 属性设置标签的位置为左侧，并设置固定高度。
    • <el-tabs v-model="activeName" tab-position="left" style="height: 200px;">
  <el-tab-pane label="用户管理" name="first">
    <p>用户管理的内容</p>
  </el-tab-pane>
  <el-tab-pane label="配置管理" name="second">
    <p>配置管理的内容</p>
  </el-tab-pane>
  <el-tab-pane label="角色管理" name="third">
    <p>角色管理的内容</p>
  </el-tab-pane>
</el-tabs>

四。 事件处理函数

  • handleTabClick:

    • 处理标签点击事件。
    • const handleTabClick = (tab) => {
  ElMessage({
    message: `点击了标签：${tab.props.label}`,
    type: 'success'
  })
}

  • handleTabAdd:

    • 处理标签添加事件。
    • const handleTabAdd = () => {
  ElMessage({
    message: '添加了新标签',
    type: 'info'
  })
}

  • handleTabRemove:

    • 处理标签删除事件。
    • const handleTabRemove = (targetName) => {
  ElMessage({
    message: `删除了标签：${targetName}`,
    type: 'warning'
  })
}
avatar
文章
阅读
粉丝