Tag 标签 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# Tag 标签

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

# 基本使用

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

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

# 自定义主题

<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>
✅ Copy success!

# 圆形标签

类似胶囊形状

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

# 镂空标签

<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>
✅ Copy success!

# 镂空带背景色

添加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>
✅ Copy success!

# 自定义尺寸

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>
✅ Copy success!

# 可关闭标签

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>
✅ Copy success!

# 带图片和图标

<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>
✅ Copy success!

# 单选标签和多选标签

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

<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>
✅ Copy success!

# API

# Props

参数	说明	类型	默认值	可选值
type	主题类型	String	primary	success / info / warning / error
disabled	不可用	Boolean	false	-
size	标签大小	String	medium	large、mini
shape	标签形状	String	square	circle
text	标签的文字内容	String \| Number	-	-
bgColor	背景颜色，默认为空字符串，即不处理	String	#C6C7CB	-
color	标签字体颜色，默认为空字符串，即不处理	String	-	-
borderColor	标签的边框颜色	String	-	-
closeColor	关闭按钮图标的颜色	String	-	-
name	点击时返回的索引值，用于区分例遍的数组哪个元素被点击了	String \| Number	-	-
plainFill	镂空时是否填充背景色	Boolean	false	true
plain	是否镂空	Boolean	false	true
closable	是否可关闭，设置为`true`，文字右边会出现一个关闭图标	Boolean	false	true
show	标签显示与否	Boolean	true	false
icon	内置图标，或绝对路径的图片	String	-	-
gutter	标签之间的间距	String \| Number	10px	-
animation	是否开启过渡动画	Boolean	true	false
closeInside	关闭按钮是不是内嵌在标签内	Boolean	false	true

# Event

事件名	说明	回调参数
click	点击标签触发	index: number 传递的`index`参数值
close	`closable`为`true`时，点击标签关闭按钮触发	index: number 传递的`index`参数值

← Badge 徽标数 LoadingIcon 加载动画 →

# Tag 标签

# 基本使用

# 自定义主题

# 圆形标签

# 镂空标签

# 镂空带背景色

# 自定义尺寸

# 可关闭标签

# 带图片和图标

# 单选标签 和 多选标签

# API

# Props

# Event

# 单选标签和多选标签