Tags 标签组

介绍

用于展示一组标签，支持单选和多选模式。当 modelValue 为数组时自动进入多选模式，标签可关闭删除。继承了 Tag 组件的所有样式属性。

导入

import Tags from '@/components/form/Tags.vue'

用法

基础用法

传入 tags 数据和 modelValue 即可展示标签组。

<template>
  <Tags v-model="value" :tags="tags" />
</template>

<script setup>
import { ref } from 'vue';
import Tags from '@/components/form/Tags.vue';

const value = ref('apple');
const tags = [
  { value: 'apple', text: '苹果' },
  { value: 'banana', text: '香蕉' },
  { value: 'grape', text: '葡萄' },
];
</script>

多选模式

当 modelValue 为数组时，自动切换为多选模式。多选模式下标签会显示关闭按钮，点击可删除对应标签。

<template>
  <Tags v-model="value" :tags="tags" />
</template>

<script setup>
import { ref } from 'vue';
import Tags from '@/components/form/Tags.vue';

const value = ref(['apple', 'banana']);
const tags = [
  { value: 'apple', text: '苹果' },
  { value: 'banana', text: '香蕉' },
  { value: 'grape', text: '葡萄' },
];
</script>

自定义样式

Tags 继承了 Tag 组件的属性，可以自定义颜色类型、尺寸、形状等。

<template>
  <Tags v-model="value" :tags="tags" type="success" size="medium" shape="round" />
</template>

<script setup>
import { ref } from 'vue';
import Tags from '@/components/form/Tags.vue';

const value = ref('apple');
const tags = [
  { value: 'apple', text: '苹果' },
  { value: 'banana', text: '香蕉' },
  { value: 'grape', text: '葡萄' },
];
</script>

换行模式

设置 wrap 属性可以让标签换行显示，默认为横向滚动。

<template>
  <Tags v-model="value" :tags="tags" wrap />
</template>

<script setup>
import { ref } from 'vue';
import Tags from '@/components/form/Tags.vue';

const value = ref(['apple', 'banana']);
const tags = [
  { value: 'apple', text: '苹果' },
  { value: 'banana', text: '香蕉' },
  { value: 'grape', text: '葡萄' },
  { value: 'orange', text: '橘子' },
];
</script>

API 参考

Tags

标签组组件，继承 Tag 组件的所有属性。

Props

名称	说明	类型	必填	默认值
modelValue	当前选中的标签值，传入数组时为多选模式	string|number|(string|number)[]	-	-
tags	标签数据列表	{ value: string|number, text: string }[]	-	[]
disabled	是否禁用	boolean	-	false
activeType	激活时的标签颜色类型	'default'|'primary'|'success'|'warning'|'danger'	-	'primary'
unActiveType	非激活时的标签颜色类型	'default'|'primary'|'success'|'warning'|'danger'	-	'default'
wrap	是否换行显示，为 false 时横向滚动	boolean	-	false
...	其他属性继承自 Tag	-	-	-

Events

名称	说明	参数
update:modelValue	选中值变化事件	string|number|(string|number)[]
tagClose	关闭标签事件	string|number