XtfTagGroupItem

组件说明

xtf-tag-group-item 是 xtf-tag-group 插槽模式的条目注册组件，可将任意卡片或图文内容纳入分组选中、删除和排序逻辑。它必须嵌套在 xtf-tag-group 中使用。

---

基础用法

1. 默认标签条目

<template>
  <xtf-tag-group v-model="selected">
    <xtf-tag-group-item value="new" text="新品优先"
  /></xtf-tag-group>
</template>
<script>
export default {
  data() {
    return { selected: [] }
  }
}
</script>

2. 单项外观覆盖

<template>
  <xtf-tag-group v-model="selected" closable>
    <xtf-tag-group-item
      value="sale"
      text="限时折扣"
      theme="danger"
      variant="soft"
      icon="local_offer"
  /></xtf-tag-group>
</template>
<script>
export default {
  data() {
    return { selected: ['sale'] }
  }
}
</script>

3. 自定义卡片插槽

插槽提供 item、state、selected、toggle、remove。

<template>
  <xtf-tag-group v-model="selected" closable>
    <xtf-tag-group-item value="express" text="极速配送">
      <template #default="p">
        <xtf-card @click="p.toggle">
          <xtf-text :text="p.selected ? '极速配送已启用' : '选择极速配送'" /><xtf-button
            size="xs"
            label="删除"
            @click.stop="p.remove" /></xtf-card></template>
</xtf-tag-group-item>
  </xtf-tag-group>
</template>
<script>
export default {
  data() {
    return { selected: [] }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
value	String | Number | Boolean	undefined	条目业务值	推荐设置
name	String | Number | Boolean	undefined	value 的兼容值	兼容数据
itemKey	String | Number	undefined	条目唯一身份，空时使用值	重复值场景
text	String	''	默认标签文字	非自定义插槽
label	String	''	text 的兼容显示字段	兼容数据
theme	String	''	标签主题	覆盖组默认值
color	String	''	标签颜色	自定义品牌色
variant	String	''	标签变体	覆盖组默认值
shape	String	''	标签形状	覆盖组默认值
size	String	''	标签尺寸	覆盖组默认值
icon	String	''	标签图标	默认标签模式
disabled	Boolean	false	禁用本项	不可用条目
checkable	Boolean	undefined	覆盖组的可选状态	单项不可选
closable	Boolean	undefined	覆盖组的可删除状态	单项可删除
customClass	String	''	包装节点类名	自定义布局
customStyle	String | Object	''	包装节点样式	自定义布局

---

插槽

插槽名称	作用域参数	说明
默认插槽	{ item, state, selected, toggle, remove }	替换默认 xtf-tag，并通过作用域方法复用组内选择和删除逻辑。

---

事件

组件源码未定义 emits。点击、选择和删除会委托给所属 xtf-tag-group，请在组组件上监听 tag-click、change、delete 等事件。

---

方法

1. toggle() — 切换当前条目选中状态

无参数，返回 void；通常直接使用插槽中的 toggle。

<template>
  <xtf-tag-group>
    <xtf-tag-group-item ref="item" value="a">
      <template #default="p"> <xtf-button label="切换" @click="p.toggle" /></template>
</xtf-tag-group-item>
  </xtf-tag-group>
</template>
<script>
export default {}
</script>

2. remove() — 删除当前条目

无参数，返回 void；仅在所属组允许删除时有效。

this.$refs.item.remove()

---

主题说明

• 默认渲染继承 xtf-tag 的主题变量与 theme、variant、shape、size 属性。
• 选中状态会添加 xtf-tag-group-item--selected 类名。
• 通过插槽可完全自定义内容视觉，同时复用所属 xtf-tag-group 的交互状态。