xtf-tabs

组件说明

xtf-tabs 是标签切换组件，适用于内容分组和筛选；支持滚动、吸顶、可关闭标签及切换前拦截。 核心能力以当前 xtf-tabs.vue 源码为准。

---

基础用法

1. 基础用法

最小配置下即可完成常见业务交互：

<template>
  <xtf-tabs :value="value" :items="items" @update:value="value = $event" @change="onEvent" />
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      items: [
        { label: '全部', value: 0 },
        { label: '待处理', value: 1, badge: 3 }
      ]
    }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

2. 核心交互

监听组件事件并维护页面状态：

<template>
  <xtf-tabs
    :value="value"
    :items="items"
    @update:value="value = $event"
    variant="card"
    equal
    @change="onEvent"
  />
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      items: [
        { label: '全部', value: 0 },
        { label: '待处理', value: 1, badge: 3 }
      ]
    }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

3. 进阶配置

组合布局、样式或插槽能力：

<template>
  <xtf-tabs
    :value="value"
    :items="items"
    @update:value="value = $event"
    scrollable
    closable
    addable
    @close="onEvent"
    @add="onEvent"
  />
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      items: [
        { label: '全部', value: 0 },
        { label: '待处理', value: 1, badge: 3 }
      ]
    }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
items	Array	函数返回值	控制组件的 items 行为。	按业务需要设置。
value	[String, Number]	undefined	控制组件的 value 行为。	按业务需要设置。
current	[String, Number]	0	控制组件的 current 行为。	按业务需要设置。
theme	String	'primary'	控制组件的 theme 行为。	按业务需要设置。
activeColor	String	''	控制组件的 activeColor 行为。	按业务需要设置。
inactiveColor	String	''	控制组件的 inactiveColor 行为。	按业务需要设置。
indicatorColor	String	''	控制组件的 indicatorColor 行为。	按业务需要设置。
indicatorInset	[String, Number]	''	控制组件的 indicatorInset 行为。	按业务需要设置。
indicatorAlign	String	'stretch'	控制组件的 indicatorAlign 行为。	按业务需要设置。
indicatorWidth	[String, Number]	''	控制组件的 indicatorWidth 行为。	按业务需要设置。
indicatorShape	String	'line'	控制组件的 indicatorShape 行为。	按业务需要设置。
indicatorImage	String	''	控制组件的 indicatorImage 行为。	按业务需要设置。
indicatorImageSize	String	'100% 100%'	控制组件的 indicatorImageSize 行为。	按业务需要设置。
indicatorImageRepeat	String	'no-repeat'	控制组件的 indicatorImageRepeat 行为。	按业务需要设置。
hideTrackIndicator	Boolean	false	控制组件的 hideTrackIndicator 行为。	按业务需要设置。
hideIndicator	Boolean	false	控制组件的 hideIndicator 行为。	按业务需要设置。
variant	String	'line'	控制组件的 variant 行为。	按业务需要设置。
size	String	'md'	控制组件的 size 行为。	按业务需要设置。
motion	String	'smooth'	控制组件的 motion 行为。	按业务需要设置。
scrollable	Boolean	false	控制组件的 scrollable 行为。	按业务需要设置。
equal	Boolean	false	控制组件的 equal 行为。	按业务需要设置。
animated	Boolean	true	控制组件的 animated 行为。	按业务需要设置。
sticky	Boolean	false	控制组件的 sticky 行为。	按业务需要设置。
offsetTop	[String, Number]	0	控制组件的 offsetTop 行为。	按业务需要设置。
stickyZIndex	[String, Number]	99	控制组件的 stickyZIndex 行为。	按业务需要设置。
stickyMode	String	'container'	控制组件的 stickyMode 行为。	按业务需要设置。
stickyContainer	[Boolean, String]	false	控制组件的 stickyContainer 行为。	按业务需要设置。
stickyDisabled	Boolean	false	控制组件的 stickyDisabled 行为。	按业务需要设置。
lazyRender	Boolean	false	控制组件的 lazyRender 行为。	按业务需要设置。
beforeChange	Function	null	控制组件的 beforeChange 行为。	按业务需要设置。
addable	Boolean	false	控制组件的 addable 行为。	按业务需要设置。
closable	Boolean	false	控制组件的 closable 行为。	按业务需要设置。
addText	String	'+'	控制组件的 addText 行为。	按业务需要设置。
customClass	String	''	控制组件的 customClass 行为。	按业务需要设置。
customStyle	[String, Object]	''	控制组件的 customStyle 行为。	按业务需要设置。

数据项结构

字段	类型	默认值	说明
id/key	String | Number	index	稳定键；列表、轮播和瀑布流项目建议提供。
title/label/name	String	''	展示名称，具体读取字段见组件对应 prop。
disabled	Boolean	false	禁用可交互项目。

---

事件

事件名称	触发时机	回调参数	参数说明
input	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('input', ...) 为准。
update:value	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('update:value', ...) 为准。
update:current	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('update:current', ...) 为准。
change	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('change', ...) 为准。
lazy-change	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('lazy-change', ...) 为准。
add	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('add', ...) 为准。
close	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('close', ...) 为准。
sticky-change	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('sticky-change', ...) 为准。
sticky-scroll	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('sticky-scroll', ...) 为准。

事件使用示例

<template>
  <xtf-tabs @input="onEvent" />
</template>
<script>
export default {
  methods: {
    onEvent(payload) {
      console.log('收到事件', payload)
    }
  }
}
</script>

---

方法

centerActiveTab(index)：滚动模式下将目标标签居中。

使用示例：

this.$refs.tabs.centerActiveTab(1)

---

主题说明

• var(--xtf-color-primary) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-primary-soft) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-success) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-success-soft) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-warning) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-warning-soft) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-danger) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-danger-soft) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-info) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-info-soft) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-text-secondary) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-tabs-text-shadow-subtle) 参与组件的颜色、背景、边框或动效呈现。
• 视觉变体的可选值以 variant、theme、layout 等属性在源码中的分支为准。

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。