tag 组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景

基本使用

• 通过type参数设置主题类型，默认为primary
• 属性text设置标签内容

<un-tag text="标签" plain size="mini" type="warning"></un-tag>

自定义主题

<un-tag text="标签"></un-tag>
<un-tag text="标签" type="warning"></un-tag>
<un-tag text="标签" type="success"></un-tag>
<un-tag text="标签" type="error"></un-tag>

圆形标签

• 类似胶囊形状

<un-tag text="标签" plain shape="circle"></un-tag>
<un-tag text="标签" type="warning" shape="circle"></un-tag>

镂空标签

<un-tag text="标签" plain> </un-tag>
<un-tag text="标签" type="warning" plain></un-tag>
<un-tag text="标签" type="success" plain></un-tag>
<un-tag text="标签" type="error" plain></un-tag>

镂空带背景色

• 添加plainFill属性镂空带背景色

<un-tag text="标签" plain> </un-tag>
<un-tag text="标签" type="warning" plain plainFill></un-tag>
<un-tag text="标签" type="success" plain plainFill></un-tag>
<un-tag text="标签" type="error" plain plainFill></un-tag>

自定义尺寸

• size属性为您提供了三种规格的标签大小，默认中等。

<un-tag text="标签" plain size="mini"></un-tag>
<un-tag text="标签" type="warning"></un-tag>
<un-tag text="标签" type="success" plain size="large"></un-tag>

可关闭标签

• tag在右上角提供了删除标签的样式

<un-tag
  text="标签"
  size="mini"
  closable
  :show="close1"
  @close="close1 = false"
></un-tag>
<un-tag
  text="标签"
  type="warning"
  closable
  :show="close2"
  @close="close2 = false"
></un-tag>
<un-tag
  text="标签"
  type="success"
  plain
  size="large"
  closable
  :show="close3"
  @close="close3 = false"
></un-tag>

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

const close1 = ref(true);
const close2 = ref(true);
const close3 = ref(true);
</script>

带图片和图标

<un-tag text="标签" size="mini" icon="map" plain></un-tag>
<un-tag text="标签" type="warning" icon="tags-fill"></un-tag>
<un-tag
  text="标签"
  type="success"
  plain
  size="large"
  icon="https://uviewui.com/example/tag.png"
></un-tag>

单选标签 和 多选标签

• 我们为您提供了单选和多选的事件，您可以在事件中获取参数列表

<template>
  <!-- 单选 -->
  <view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
    <un-tag
      :text="`选项${index + 1}`"
      :plain="!item.checked"
      type="warning"
      :name="index"
      @click="radioClick"
    >
    </un-tag>
  </view>
  <!-- 多选 -->
  <view
    class="u-page__tag-item"
    v-for="(item, index) in checkboxs"
    :key="index"
  >
    <un-tag
      :text="`选项${index + 1}`"
      :plain="!item.checked"
      type="warning"
      :name="index"
      @click="checkboxClick"
    >
    </un-tag>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';

type Item = {
  checked: boolean;
};

// 单选标签数据
const radios = reactive<Item[]>([
  {
    checked: true
  },
  {
    checked: false
  },
  {
    checked: false
  }
]);

// 多选标签数据
const checkboxs = reactive<Item[]>([
  {
    checked: true
  },
  {
    checked: false
  },
  {
    checked: false
  }
]);

// 单选标签点击事件
const radioClick = (name: number) => {
  radios.forEach((item, index) => {
    item.checked = index === name;
  });
};

// 多选标签点击事件
const checkboxClick = (name: number) => {
  checkboxs[name].checked = !checkboxs[name].checked;
};
</script>
<style lang="scss">
  .u-page__tag-item {
    margin-right: 20px;
  }

  .u-demo-block__content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
</style>

API

Props

参数	说明	类型	默认值
type	主题类型	Enum	default
hairline	是否显示按钮的细边框	Boolean	true
disabled	不可用	Boolean	false
size v4.0.105	标签大小	Enum	medium
size v4.1.0	标签大小	Enum	normal
shape v4.0.105	标签形状	Enum	square
shape v4.1.0	标签形状	Enum	square
text	标签的文字内容	String | Number	-
bgColor	背景颜色，默认为空字符串，即不处理	String	#C6C7CB
color	标签字体颜色，默认为空字符串，即不处理	String	-
borderColor	标签的边框颜色	String	-
closeColor	关闭按钮图标的颜色	String	-
name	点击时返回的索引值，用于区分例遍的数组哪个元素被点击了	String | Number	-
plainFill	镂空时是否填充背景色	Boolean	false
plain	是否镂空	Boolean	false
closable	是否可关闭，设置为true，文字右边会出现一个关闭图标	Boolean	false
show	标签显示与否	Boolean	true
icon	内置图标，或绝对路径的图片	String	-
gutter	标签之间的间距	String | Number	10px
closeInside	关闭按钮是不是内嵌在标签内	Boolean	false
width	标签宽度，超出后自动省略	String / Number	''

Event

事件名	说明	类型
click	点击标签触发	Function
close	closable为true时，点击标签关闭按钮触发	Function