ERP 组件库

Appearance

标签页 Tabs ​

将内容组织同一视图中，一次可查看一个视图内容，查看其他内容可切换选项卡查看。 ​

基本用法 ​

标签页的基本使用方法。

代码事例
vue
<template>
  <fk-tabs default-active-key="2">
    <fk-tab-pane key="1" title="Tab 1">
      Content of Tab Panel 1
    </fk-tab-pane>
    <fk-tab-pane key="2" title="Tab 2">
      Content of Tab Panel 2
    </fk-tab-pane>
    <fk-tab-pane key="3">
      <template #title>Tab 3</template>
      Content of Tab Panel 3
    </fk-tab-pane>
  </fk-tabs>
</template>

带图标的页签 ​

带有图标的标签页。

代码事例
vue
<template>
  <fk-tabs>
    <fk-tab-pane key="1">
      <template #title>
        <icon-calendar/> Tab 1
      </template>
      Content of Tab Panel 1
    </fk-tab-pane>
    <fk-tab-pane key="2">
      <template #title>
        <icon-clock-circle/> Tab 2
      </template>
      Content of Tab Panel 2
    </fk-tab-pane>
    <fk-tab-pane key="3">
      <template #title>
        <icon-user/> Tab 3
      </template>
      Content of Tab Panel 3
    </fk-tab-pane>
  </fk-tabs>
</template>

位置 ​

通过 position 属性可以自定义标签栏的位置。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-radio-group v-model="position" type="button">
      <fk-radio value="top">Top</fk-radio>
      <fk-radio value="right">Right</fk-radio>
      <fk-radio value="bottom">Bottom</fk-radio>
      <fk-radio value="left">Left</fk-radio>
    </fk-radio-group>
    <fk-tabs :position="position">
      <fk-tab-pane key="1" title="Tab 1">
        Content of Tab Panel 1
      </fk-tab-pane>
      <fk-tab-pane key="2" title="Tab 2">
        Content of Tab Panel 2
      </fk-tab-pane>
      <fk-tab-pane key="3" title="Tab 3">
        Content of Tab Panel 3
      </fk-tab-pane>
    </fk-tabs>
  </fk-space>
</template>

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

export default {
  setup() {
    const position = ref('top');

    return {
      position
    }
  },
}
</script>

不同类型 ​

通过 type 可以设置标签的类型。

代码事例
vue

<template>
  <fk-space direction="vertical" size="large">
    <fk-radio-group v-model="type" type="button">
      <fk-radio value="line">Line</fk-radio>
      <fk-radio value="card">Card</fk-radio>
      <fk-radio value="card-gutter">Card Gutter</fk-radio>
      <fk-radio value="card-radian">Card Radian</fk-radio>
      <fk-radio value="text">Text</fk-radio>
      <fk-radio value="rounded">Rounded</fk-radio>
      <fk-radio value="capsule">Capsule</fk-radio>
    </fk-radio-group>
    <fk-radio-group v-model="size" type="button">
      <fk-radio value="mini">Mini</fk-radio>
      <fk-radio value="small">Small</fk-radio>
      <fk-radio value="medium">Medium</fk-radio>
      <fk-radio value="large">Large</fk-radio>
    </fk-radio-group>
    <fk-tabs :type="type" :size="size">
      <fk-tab-pane key="1" title="Tab 1">
        Content of Tab Panel 1
      </fk-tab-pane>
      <fk-tab-pane key="2" title="Tab 2">
        Content of Tab Panel 2
      </fk-tab-pane>
      <fk-tab-pane key="3" title="Tab 3">
        Content of Tab Panel 3
      </fk-tab-pane>
    </fk-tabs>
  </fk-space>
</template>

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

export default {
  setup() {
    const type = ref('line');
    const size = ref('medium');

    return {
      type,
      size
    }
  },
}
</script>

懒加载 ​

通过设置 lazy-load 属性，可以让面板在首次激活时渲染。

代码事例
vue
<template>
  <fk-tabs default-active-key="2" lazy-load>
    <fk-tab-pane key="1" title="Tab 1">
      Content of Tab Panel 1
    </fk-tab-pane>
    <fk-tab-pane key="2" title="Tab 2">
      Content of Tab Panel 2
    </fk-tab-pane>
    <fk-tab-pane key="3" title="Tab 3">
      Content of Tab Panel 3
    </fk-tab-pane>
  </fk-tabs>
</template>

附加内容 ​

通过 extra 插槽可以自定义额外显示内容。

代码事例
vue
<template>
  <fk-tabs>
    <template #extra>
      <fk-button>Action</fk-button>
    </template>
    <fk-tab-pane key="1" title="Tab 1">
      Content of Tab Panel 1
    </fk-tab-pane>
    <fk-tab-pane key="2" title="Tab 2">
      Content of Tab Panel 2
    </fk-tab-pane>
    <fk-tab-pane key="3" title="Tab 3">
      Content of Tab Panel 3
    </fk-tab-pane>
  </fk-tabs>
</template>

动态增减标签页 ​

通过设置 :editable="true" 可以开启动态增减标签页。仅在 line | card | card-gutter 生效

代码事例
vue

<template>
  <fk-tabs type="card-gutter" :editable="true" show-add-button auto-switch @add="handleAdd" @delete="handleDelete">
    <fk-tab-pane v-for="(item, index) of data" :key="item.key" :title="item.title" :closable="index!==2">
      {{ item?.content }}
    </fk-tab-pane>
  </fk-tabs>
</template>

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

let count = 5;

export default {
  setup() {
    const data = ref([
      {
        key: '1',
        title: 'Tab 1',
        content: 'Content of Tab Panel 1'
      },
      {
        key: '2',
        title: 'Tab 2',
        content: 'Content of Tab Panel 2'
      },
      {
        key: '3',
        title: 'Tab 3',
        content: 'Content of Tab Panel 3'
      },
      {
        key: '4',
        title: 'Tab 4',
        content: 'Content of Tab Panel 4'
      }
    ]);

    const handleAdd = () => {
      const number = count++;
      data.value = data.value.concat({
        key: `${number}`,
        title: `New Tab ${number}`,
        content: `Content of New Tab Panel ${number}`
      })
    };
    const handleDelete = (key) => {
      data.value = data.value.filter(item => item.key !== key)
    };

    return {
      data,
      handleAdd,
      handleDelete
    }
  },
}
</script>

触发方式 ​

通过 trigger 指定触发方式。

代码事例
vue
<template>
  <fk-radio-group v-model="trigger">
    <fk-radio value="click">click</fk-radio>
    <fk-radio value="hover">hover</fk-radio>
  </fk-radio-group>
  <fk-tabs default-active-key="1" :trigger="trigger">
    <fk-tab-pane key="1" title="Tab 1"> Content of Tab Panel 1 </fk-tab-pane>
    <fk-tab-pane key="2" title="Tab 2"> Content of Tab Panel 2 </fk-tab-pane>
    <fk-tab-pane key="3">
      <template #title>Tab 3</template>
      Content of Tab Panel 3
    </fk-tab-pane>
  </fk-tabs>
</template>

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

export default {
  setup() {
    const trigger = ref('click');
    return {
      trigger,
    };
  },
};
</script>

API ​

<tabs> Props ​

参数名描述类型默认值版本
active-key (v-model)当前选中的标签的 keystring|number-
default-active-key默认选中的标签的key（非受控状态，为空时选中第一个标签页）string|number-
position选项卡的位置'left' | 'right' | 'top' | 'bottom''top'
size选项卡的大小'mini' | 'small' | 'medium' | 'large'-
type选项卡的类型'line' | 'card' | 'card-gutter' | 'text' | 'rounded' | 'capsule''line'
direction选项卡的方向'horizontal' | 'vertical''horizontal'
editable是否开启可编辑模式booleanfalse
show-add-button是否显示增加按钮（仅在可编辑模式可用）booleanfalse
destroy-on-hide是否在不显示标签时销毁内容booleanfalse1.0.0
lazy-load是否在首次展示标签时挂载内容booleanfalse
justify高度撑满容器，只在水平模式下生效。booleanfalse
animation是否开启选项内容过渡动画booleanfalse
header-padding选项卡头部是否存在水平边距。仅对 type 等于 line、text 类型的选项卡生效booleantrue1.0.0
auto-switch创建标签后是否切换到新标签（最后一个）booleanfalse1.0.0
hide-content是否隐藏内容booleanfalse1.0.0
trigger触发方式'hover' | 'click''click'1.0.0

<tabs> Events ​

事件名描述参数
change当前标签值改变时触发key: string | number
tab-click用户点击标签时触发key: string | number
add用户点击增加按钮时触发-
delete用户点击删除按钮时触发key: string | number

<tabs> Slots ​

插槽名描述参数
extra选项卡额外内容-

<tab-pane> Props ​

参数名描述类型默认值版本
title选项卡的标题string-
disabled是否禁用booleanfalse
closable是否允许关闭此选项卡（仅在可编辑模式生效）booleantrue
destroy-on-hide是否在不显示标签时销毁内容booleanfalse1.0.0

<tab-pane> Slots ​

插槽名描述参数
title选项卡标题-

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team