TagGroup 标签组

MoTagGroup 用于标签筛选、状态切换和多选条件组合。支持单选、多选、禁用、尺寸、间距和自定义颜色。

单选

Light

当前值：all

Dark

当前值：all

<script setup lang="ts">
import { ref } from "vue";

const active = ref("all");
const options = [
  { label: "全部", value: "all" },
  { label: "运行中", value: "running" },
  { label: "已停止", value: "stopped" }
];
</script>

<template>
  <MoTagGroup v-model="active" :options="options" />
</template>

多选

Light

当前值：image

Dark

当前值：image

<MoTagGroup v-model="values" multiple :options="options" />

尺寸

Light

Dark

<MoTagGroup v-model="active" size="small" :options="options" />
<MoTagGroup v-model="active" :options="options" />
<MoTagGroup v-model="active" size="large" :options="options" />

自定义颜色

Light

Dark

<MoTagGroup
  v-model="active"
  :options="options"
  active-background-color="#7c3aed"
  active-text-color="#ffffff"
/>

自定义内容

Light

Dark

<MoTagGroup v-model="active" :options="options">
  <template #item="{ option, selected }">
    <span>{{ option.label }} - {{ selected ? "已选" : "可选" }}</span>
  </template>
</MoTagGroup>

API

属性	说明	类型	默认值
v-model	当前选中值	TagGroupValue | TagGroupValue[]	undefined
options	标签项	TagGroupOption[]	[]
theme	主题	light | dark	dark
size	尺寸	small | default | large	default
multiple	是否多选	boolean	false
gap	标签间距	string | number	8
backgroundColor	默认背景色	string	-
activeBackgroundColor	选中背景色	string	-
textColor	默认文字色	string	-
activeTextColor	选中文字色	string	-
disabled	是否整体禁用	boolean	false

TagGroupOption

字段	说明	类型
label	标签文本	string
value	标签值	string | number
disabled	是否禁用	boolean
backgroundColor	当前项默认背景色	string
activeBackgroundColor	当前项选中背景色	string
textColor	当前项默认文字色	string
activeTextColor	当前项选中文字色	string

Events

事件	说明	回调参数
change	选中值变化时触发	value, option
update:modelValue	选中值变化时触发	value

Slots

插槽	说明
item	自定义标签项，参数 { option, index, selected }