uView Next
4.1.6

外观

Tag 标签

约 1507 字大约 5 分钟

2025-10-31

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是否显示按钮的细边框Booleantrue
disabled不可用Booleanfalse
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镂空时是否填充背景色Booleanfalse
plain是否镂空Booleanfalse
closable是否可关闭，设置为true，文字右边会出现一个关闭图标Booleanfalse
show标签显示与否Booleantrue
icon内置图标，或绝对路径的图片String-
gutter标签之间的间距String | Number10px
closeInside关闭按钮是不是内嵌在标签内Booleanfalse
width标签宽度，超出后自动省略String / Number''

Event

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

Scss 变量

变量名默认值说明
$un-tag-border1px solid $color-primary标签边框样式
$un-tag-text-color$text-color-inverted标签文本颜色
$un-tag-hairline-border-width0.5px细边框宽度
$un-tag-hairline-margin0.1px细边框外边距
$un-tag-circle-border-radius$radius-circle圆形标签圆角
$un-tag-square-border-radius$radius-base方形标签圆角
$un-tag-mini-height22px迷你尺寸标签高度
$un-tag-mini-padding0 5px迷你尺寸标签内边距
$un-tag-mini-font-size$text-sm迷你尺寸标签字体大小
$un-tag-mini-line-height$line-sm迷你尺寸标签行高
$un-tag-medium-height26px中等尺寸标签高度
$un-tag-medium-padding0 10px中等尺寸标签内边距
$un-tag-medium-font-size$text-base中等尺寸标签字体大小
$un-tag-medium-line-height$line-base中等尺寸标签行高
$un-tag-large-height32px大尺寸标签高度
$un-tag-large-padding0 15px大尺寸标签内边距
$un-tag-large-font-size$text-lg大尺寸标签字体大小
$un-tag-large-line-height$line-lg大尺寸标签行高
$un-tag-close-inside-transformscale(0.7) translateX(5px)内嵌关闭按钮变换
$un-tag-close-absolute-transformscale(0.6)绝对定位关闭按钮变换
$un-tag-close-absolute-top-10px绝对定位关闭按钮顶部距离
$un-tag-close-absolute-right-10px绝对定位关闭按钮右侧距离
$un-tag-close-z-index10关闭按钮层级
$un-tag-close-mini-width18px迷你尺寸关闭按钮宽度
$un-tag-close-mini-height18px迷你尺寸关闭按钮高度
$un-tag-close-medium-width22px中等尺寸关闭按钮宽度
$un-tag-close-medium-height22px中等尺寸关闭按钮高度
$un-tag-close-large-width26px大尺寸关闭按钮宽度
$un-tag-close-large-height26px大尺寸关闭按钮高度

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档

Copyright © 2026 uView Next