TagGroup 标签组

类似antd CheckableTag 效果， 支持单选、多选、图标等功能, 这里进行了组的封装,可以更简洁的获取数据。

基础用法

示例图标使用 s-icon-font 组件,支持type调用iconfont线上图标，也支持传入antd图标组件。

基础用法（单选）

全部

标签1

标签2

标签3

标签4

值：

多选模式

全部

标签1

标签2

标签3

标签4

值：[]

带图标

标签1

标签2

标签3

值：

自定义图标颜色

标签1

标签2

标签3

值：

antd tag显示(单选)(此模式不支持使用图标定义)

全部

标签1

标签2

标签3

标签4

值：

antd tag显示(此模式不支持使用图标定义)

全部

标签1

标签2

标签3

标签4

值：[]

复制代码

查看代码

<template>
  <!-- 基础用法（单选） -->
  <s-tag-group
    v-model:value="value1"
    :tags="tags"
  />

  <!-- 多选模式 -->
  <s-tag-group
    v-model:value="value2"
    :tags="tags"
    mode="multiple"
  />

  <!-- 带图标 -->
  <s-tag-group
    v-model:value="value3"
    :tags="tagsWithIcon"
  />

  <!-- 自定义图标颜色 -->
  <s-tag-group
    v-model:value="value4"
    :tags="tagsWithIconColor"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TagItem } from '@/components/TagGroup/type'

// 基础标签数据
const tags: TagItem[] = [
  { label: '标签1', value: '1' },
  { label: '标签2', value: '2' },
  { label: '标签3', value: '3' },
  { label: '标签4', value: '4' }
]

// 带图标的标签数据
const tagsWithIcon: TagItem[] = [
  { label: '标签1', value: '1', icon: 'icon-star' },
  { label: '标签2', value: '2', icon: 'icon-star' },
  { label: '标签3', value: '3', icon: 'icon-star' },
  { label: '标签4', value: '4', icon: 'icon-star' }
]

// 自定义图标颜色的标签数据
const tagsWithIconColor: TagItem[] = [
  { label: '标签1', value: '1', icon: 'icon-star', iconColor: '#f5222d' },
  { label: '标签2', value: '2', icon: 'icon-star', iconColor: '#fa8c16' },
  { label: '标签3', value: '3', icon: 'icon-star', iconColor: '#52c41a' },
  { label: '标签4', value: '4', icon: 'icon-star', iconColor: '#1890ff' }
]

// 单选值
const value1 = ref('')

// 多选值
const value2 = ref<string[]>([])

// 带图标的值
const value3 = ref('')

// 自定义图标颜色的值
const value4 = ref('')
</script>

API

属性

属性名	说明	类型	默认值
value(v-model)	当前选中的值	string | string[]	''
tags	标签数据	TagItem[]	[]
gutter	间隔	Number[]	[8,8]
mode	选择模式	'single' | 'multiple'	'single'
displayType	显示样式（支持antd-tag采用antd tag）	'default' | 'antd-tag'	'default'

| totalConfig | 全选配置(批量选择下value无需传入) | { show: boolean; value?: any } | { show: true, value: '' } |

TagItem 类型

interface TagItem {
  /** 标签文本 */
  label: string;
  /** 标签值 */
  value: string;
  /** 图标类型或渲染函数(antd-tag模式下不支持) */
  icon?: string | VNode;
  /** 图标颜色（antd-tag模式下不支持） */
  iconColor?: string;
  /** 其他属性 */
  [prop: string]: any;
}

Events

事件名称	说明	默认值
update:value	选择回调	function(value)

注意事项

1. 单选模式下，开启全选需传入全选字段key,批量不需要。
2. antd-tag模式显示，不支持自定义图标与颜色。