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>

Copy

# 选项卡样式

选项卡样式的标签页。

用户管理

配置管理

角色管理

定时任务补偿

只需要设置 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>

Copy

# 卡片化

卡片化的标签页。

用户管理

配置管理

角色管理

定时任务补偿

将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>

Copy

# 位置

可以通过 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>

Copy

# 胶囊选项卡

我的行程我的行程

消息中心

角色管理

定时任务补偿

尺寸：

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>

Copy

# 自定义标签页

可以通过具名 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>

Copy

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

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>

Copy

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

标签名为 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>

Copy

# 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 实例