纷享销客开发者手册
目录

Tabs 标签页

# Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

# 基础用法

基础的、简洁的标签页。

用户管理 配置管理 角色管理 定时任务补偿


Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。

<template>
  <fx-tabs v-model="activeName" @tab-click="handleClick">
    <fx-tab-pane label="用户管理" name="first">用户管理</fx-tab-pane>
    <fx-tab-pane label="配置管理" name="second">配置管理</fx-tab-pane>
    <fx-tab-pane label="角色管理" name="third">角色管理</fx-tab-pane>
    <fx-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</fx-tab-pane>
  </fx-tabs>
  <br /><br /><br />

  <!-- <fx-tabs v-model="activeName" @tab-click="handleClick">
    <fx-tab-pane v-for="item in options" :label="item.label" :name="item.name" :hidden="item.hidden" >{{item.label}}</fx-tab-pane>
  </fx-tabs> -->
</template>
<script>
  export default {
    data() {
      return {
        activeName: "first",
        options: [
          {
            label: "用户管理",
            name: "first",
          },
          {
            label: "配置管理",
            name: "second",
          },
          {
            label: "角色管理",
            name: "third",
          },
          {
            label: "定时任务补偿",
            name: "fourth",
            hidden: false,
          },
        ],
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log("handleClick...", tab.label);
      },
    },
    mounted() {},
  };
</script>
显示代码 复制代码

# 选项卡样式

选项卡样式的标签页。

用户管理 配置管理 角色管理 定时任务补偿

只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。

<template>
  <fx-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <fx-tab-pane label="用户管理" name="first">用户管理</fx-tab-pane>
    <fx-tab-pane label="配置管理" name="second">配置管理</fx-tab-pane>
    <fx-tab-pane label="角色管理" name="third">角色管理</fx-tab-pane>
    <fx-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</fx-tab-pane>
  </fx-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: "first",
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log("handleClick...", tab.label);
      },
    },
  };
</script>
显示代码 复制代码

# 卡片化

卡片化的标签页。

用户管理 配置管理 角色管理 定时任务补偿

将type设置为border-card。

<fx-tabs type="border-card">
  <fx-tab-pane label="用户管理">用户管理</fx-tab-pane>
  <fx-tab-pane label="配置管理">配置管理</fx-tab-pane>
  <fx-tab-pane label="角色管理">角色管理</fx-tab-pane>
  <fx-tab-pane label="定时任务补偿">定时任务补偿</fx-tab-pane>
</fx-tabs>
<br><br>
显示代码 复制代码

# 位置

可以通过 tab-position 设置标签的位置

top right bottom left 用户管理 配置管理 角色管理 定时任务补偿

标签一共有四个方向的设置 tabPosition="left|right|top|bottom"

<template>
  <fx-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
    <fx-radio-button label="top">top</fx-radio-button>
    <fx-radio-button label="right">right</fx-radio-button>
    <fx-radio-button label="bottom">bottom</fx-radio-button>
    <fx-radio-button label="left">left</fx-radio-button>
  </fx-radio-group>

  <fx-tabs :tab-position="tabPosition" style="height: 200px;">
    <fx-tab-pane label="用户管理">用户管理</fx-tab-pane>
    <fx-tab-pane label="配置管理">配置管理</fx-tab-pane>
    <fx-tab-pane label="角色管理">角色管理</fx-tab-pane>
    <fx-tab-pane label="定时任务补偿">定时任务补偿</fx-tab-pane>
  </fx-tabs>
</template>
<script>
  export default {
    data() {
      return {
        tabPosition: "left",
      };
    },
  };
</script>
显示代码 复制代码

# 胶囊选项卡

我的行程 我的行程 消息中心 角色管理 定时任务补偿

尺寸： small mini micro
<fx-tabs type="pill" :size="size">
  <fx-tab-pane>
    <span slot="label"><i class="fx-icon-calendar"></i> 我的行程</span>
    我的行程
  </fx-tab-pane>
  <fx-tab-pane label="消息中心">消息中心</fx-tab-pane>
  <fx-tab-pane label="角色管理">角色管理</fx-tab-pane>
  <fx-tab-pane label="定时任务补偿">定时任务补偿</fx-tab-pane>
</fx-tabs>
<br><br>
<fx-row>
  <span>尺寸：</span>
  <fx-radio-group v-model="size">
    <fx-radio label="small">small</fx-radio>
    <fx-radio label="mini">mini</fx-radio>
    <fx-radio label="micro">micro</fx-radio>
  </fx-radio-group>
</fx-row>
<script>
  export default {
    data() {
      return {
        size: "small",
      };
    }
  };
</script>
显示代码 复制代码

# 自定义标签页

可以通过具名 slot 来实现自定义标签页的内容

我的行程 我的行程 消息中心 角色管理 下拉菜单 黄金糕 狮子头 螺蛳粉 定时任务补偿 
<fx-tabs type="border-card">
  <fx-tab-pane>
    <span slot="label"><i class="fx-icon-calendar"></i> 我的行程</span>
    我的行程
  </fx-tab-pane>
  <fx-tab-pane label="消息中心">消息中心</fx-tab-pane>
  <fx-tab-pane label="角色管理">角色管理</fx-tab-pane>
  <fx-tab-pane label="定时任务补偿">
    <fx-dropdown slot="label">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <fx-dropdown-menu slot="dropdown">
        <fx-dropdown-item>黄金糕</fx-dropdown-item>
        <fx-dropdown-item>狮子头</fx-dropdown-item>
        <fx-dropdown-item>螺蛳粉</fx-dropdown-item>
      </fx-dropdown-menu>
    </fx-dropdown>
    定时任务补偿
  </fx-tab-pane>
</fx-tabs>
显示代码 复制代码

# 自定义增加标签页触发器

add tab
Tab 1 content Tab 2 content 

<div style="margin-bottom: 20px;">
  <fx-button size="small" @click="addTab(editableTabsValue)">
    add tab
  </fx-button>
</div>
<fx-tabs
  v-model="editableTabsValue"
  type="card"
  closable0
  @tab-remove="removeTab"
>
  <fx-tab-pane
    v-for="(item, index) in editableTabs"
    :key="item.name"
    :label="item.title"
    :name="item.name"
  >
    {{item.content}}
  </fx-tab-pane>
</fx-tabs>
<br /><br />

<!-- <fx-tabs
  v-model="editableTabsValue"
  type="card"
  closable0
  :scrollByArrow="false"
  @tab-remove="removeTab"
>
  <fx-tab-pane
    v-for="(item, index) in editableTabs"
    :key="item.name"
    :label="item.title"
    :name="item.name"
  >
    {{item.content}}
  </fx-tab-pane>
</fx-tabs> -->

<script>
  export default {
    data() {
      return {
        editableTabsValue: "2",
        editableTabs: [
          {
            title: "Tab 1",
            name: "1",
            content: "Tab 1 content",
          },
          {
            title: "Tab 2",
            name: "2",
            content: "Tab 2 content",
          },
        ],
        tabIndex: 2,
      };
    },
    methods: {
      addTab(targetName) {
        let newTabName = ++this.tabIndex + "";
        this.editableTabs.push({
          title: "New Tab" + this.editableTabs.length,
          name: newTabName,
          content: "New Tab content",
        });
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
      },
    },
    created() {
      if (typeof window !== 'undefined') {
        window.vm = this;
      }
    },
  };
</script>
显示代码 复制代码

# 超过显示区域后显示更多

标签名为 fx-tabs2。只有第一种支持红点。

菜单 1 菜单 2 菜单菜单 3 菜单 4 菜单 5 菜单 6 菜单 7 菜单 8 菜单 9 菜单 10 菜单菜单菜单菜单菜单菜单 菜单 12 菜单 13 菜单 14 菜单 15 菜单 16 菜单 17 菜单 18 菜单 19 菜单 20 菜单 21 菜单 22 菜单 23 菜单 24 菜单 25 菜单 26 菜单 27 菜单 28 菜单 29

菜单 1 菜单 2 菜单菜单 3 菜单 4 菜单 5 菜单 6 菜单 7 菜单 8 菜单 9 菜单 10 菜单菜单菜单菜单菜单菜单 菜单 12 菜单 13 菜单 14 菜单 15 菜单 16 菜单 17 菜单 18 菜单 19 菜单 20 菜单 21 菜单 22 菜单 23 菜单 24 菜单 25 菜单 26 菜单 27 菜单 28 菜单 29

菜单 1 菜单 2 菜单菜单 3 菜单 4 菜单 5 菜单 6 菜单 7 菜单 8 菜单 9 菜单 10 菜单菜单菜单菜单菜单菜单 菜单 12 菜单 13 菜单 14 菜单 15 菜单 16 菜单 17 菜单 18 菜单 19 菜单 20 菜单 21 菜单 22 菜单 23 菜单 24 菜单 25 菜单 26 菜单 27 菜单 28 菜单 29

small mini micro 

<fx-tabs2 v-model="value" :tabs="tabs" :size="size" @tab-click="tabClick">
  <fx-tab-pane v-for="item in tabs" :name="item.name">
    {{item.label}}
  </fx-tab-pane>
</fx-tabs2>
<br></br>

<fx-tabs2 v-model="value2" :tabs="tabs" :size="size" border @tab-click="tabClick">
  <fx-tab-pane v-for="item in tabs" :name="item.name">{{item.label}} </fx-tab-pane>
</fx-tabs2>
<br></br>

<fx-tabs2 v-model="value3" :tabs="tabs" :size="size" fill @tab-click="tabClick">
  <fx-tab-pane v-for="item in tabs" :name="item.name">{{item.label}} </fx-tab-pane>
</fx-tabs2>
<br></br>


<fx-radio-group v-model="size">
  <fx-radio label="small">small</fx-radio>
  <fx-radio label="mini">mini</fx-radio>
  <fx-radio label="micro">micro</fx-radio>
</fx-radio-group>
<br /><br />

<script>
  export default {
    data() {
      return {
        value: "4",
        value2: "4",
        value3: "4",
        size:'small',
        tabs: [
          {
            label: "菜单 1",
            name: "a1",
            showDot:true,
            // cusHtml:'<strong>a</strong>',
            // cusHtmlWrapCls:'aa'
            // hideLabel:true,
          },
          {
            label: "菜单 2",
            name: "2",
            disabled:true,
          },
          {
            label: "菜单菜单 3",
            name: "3",
            showDot:true,
            dotNum:3,
            // hidden: true,
          },
          {
            label: "菜单 4",
            name: "4",
            showDot:true,
          }
        ]
      };
    },
    methods: {
      tabClick(tab) {
        console.log("tabClick...", this.value, tab);
      }
    },
    created() {
      Array.from({ length: 25 }).forEach((v, i) => {
        this.tabs.push({
          label: "菜单 " + (i + 5),
          name: i + 5 + ""
        });
      });
      this.tabs[10].label = "菜单菜单菜单菜单菜单菜单";
      this.tabs[11].disabled = true;
    },
    mounted() {}
  };
</script>
显示代码 复制代码

# Tabs Attributes

参数 说明 类型 可选值 默认值
value / v-model 绑定值，选中选项卡的 name string — 第一个选项卡的 name
type 风格类型 string card/border-card —
closable 标签是否可关闭 boolean — false
addable 标签是否可增加 boolean — false
editable 标签是否同时可增加和关闭 boolean — false
tab-position 选项卡所在位置 string top/right/bottom/left top
stretch 标签的宽度是否自撑开 boolean - false
before-leave 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 Function(activeName, oldActiveName) — —
bar-width-delta 等于一个 tabNav 的宽度减去 bar 的宽度 number - 20
show-tab-content 是否显示 tabs 下的 panel 区域， boolean - true
hide-single-tab-header 1 个 tab 时，隐藏 tab 的 header boolean - false
size 尺寸 string small/mini/micro small

# Tabs Events

事件名称 说明 回调参数
tab-click tab 被选中时触发 被选中的标签 tab 实例
tab-remove 点击 tab 移除按钮后触发 被删除的标签的 name
tab-add 点击 tabs 的新增按钮后触发 —
edit 点击 tabs 的新增按钮或 tab 被关闭后触发 (targetName, action)

# Tab-pane Attributes

参数 说明 类型 可选值 默认值
label 选项卡标题 string — —
disabled 是否禁用 boolean — false
name 与选项卡绑定值 value 对应的标识符，表示选项卡别名 string — 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'
closable 标签是否可关闭 boolean — false
lazy 标签是否延迟渲染 boolean — false
hidden 是否隐藏此标签 boolean — false

# Tabs2 Attributes

参数 说明 类型 可选值 默认值
value / v-model 绑定值，选中选项卡的 name string — 第一个选项卡的 name
tabs 菜单数据，如：[{label:'菜单名称',name:'菜单标识',hidden:false,disabled:false}] array — []
before-leave 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 Function(activeName, oldActiveName) — —

# Tabs2 Events

事件名称 说明 回调参数
tab-click tab 被选中时触发 被选中的标签 tab 实例