基础用法

基础的、简洁的标签页。

Tabs 通过list来生成选项卡，如果需要使用插槽。插槽的名称就是以value为名称

<template>
  <higher-tabs
    v-model="value"
    :list="list"
  >
    <template v-slot:tab1>
      1
    </template>
    <template v-slot:tab2>
      2
    </template>
  </higher-tabs>
</template>

<script>
export default {
  data() {
    // 数据
    return {
      value: "tab1",
      list: [
        {
          value: "tab1",
          label: "选项卡1"
        },
        {
          value: "tab2",
          label: "选项卡2"
        },
        {
          value: "tab3",
          label: "选项卡3"
        }
      ]
    };
  }
};
</script>

Expand Copy Copy

选项卡样式

选项卡样式的标签页。

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

<template>
  <higher-tabs
    v-model="value"
    :list="list"
    type="card"
  >
    <template v-slot:tab1>
      1
    </template>
    <template v-slot:tab2>
      2
    </template>
  </higher-tabs>
</template>
<script>
  export default {
    data() {
      return {
        value: "tab1",
        list: [
          {
            value: "tab1",
            label: "选项卡1"
          },
          {
            value: "tab2",
            label: "选项卡2"
          },
          {
            value: "tab3",
            label: "选项卡3"
          }
        ]
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

Expand Copy Copy

动态增减标签页

增减标签页按钮只能在选项卡样式的标签页下使用

<template>
  <higher-tabs
    v-model="value"
    :list="list"
    type="card"
    editable
    @edit="handleTabsEdit"
  >
    <template v-slot:tab1>
      1
    </template>
    <template v-slot:tab2>
      2
    </template>
  </higher-tabs>
</template>
<script>
  export default {
    data() {
      return {
        value: "tab1",
        i: 4,
        list: [
          {
            value: "tab1",
            label: "选项卡1"
          },
          {
            value: "tab2",
            label: "选项卡2"
          },
          {
            value: "tab3",
            label: "选项卡3"
          }
        ]
      };
    },
    methods: {
      handleTabsEdit(targetName, action) {
        if (action === 'add') {
          this.list.push({
            value: `tab${this.i}`,
            label: `选项卡${this.i}`
          });
          this.i ++
        }
        if (action === 'remove') {
          this.list.splice(this.list.findIndex(item => (targetName === item.value)), 1)
        }
      }
    }
  };
</script>

Expand Copy Copy

自定义动态增减标签页

• 使用slot为add来自定义标签

新增

<template>
  <higher-tabs
    v-model="value"
    :list="list"
    type="card"
    editable
    @edit="handleTabsEdit"
  >
    <template v-slot:tab1>
      1
    </template>
    <template v-slot:tab2>
      2
    </template>
    <db-button slot="add" size="small" type="low" @click="handleTabsEdit(null, 'add')">新增</db-button>
  </higher-tabs>
</template>
<script>
  export default {
    data() {
      return {
        value: "tab1",
        i: 4,
        list: [
          {
            value: "tab1",
            label: "选项卡1"
          },
          {
            value: "tab2",
            label: "选项卡2"
          },
          {
            value: "tab3",
            label: "选项卡3"
          }
        ]
      };
    },
    methods: {
      handleTabsEdit(targetName, action) {
        if (action === 'add') {
          this.list.push({
            value: `tab${this.i}`,
            label: `选项卡${this.i}`
          });
          this.i ++
        }
        if (action === 'remove') {
          this.list.splice(this.list.findIndex(item => (targetName === item.value)), 1)
        }
      }
    }
  };
</script>

Expand Copy 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)	—	—

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