Tag 标签

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

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本使用

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

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

自定义主题

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

圆形标签

• 类似胶囊形状

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

镂空标签

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

镂空带背景色

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

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

自定义尺寸

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

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

可关闭标签

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

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

<script>
  export default {
    data() {
      return {
        close1: true,
        close2: true,
        close3: true,
        radios: [
          {
            checked: true,
          },
          {
            checked: false,
          },
          {
            checked: false,
          },
        ],
        checkboxs: [
          {
            checked: true,
          },
          {
            checked: false,
          },
          {
            checked: false,
          },
        ],
      };
    },
  };
</script>

带图片和图标

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

单选标签 和 多选标签

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

<template>
  <!-- 单选 -->
  <view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
    <up-tag
      :text="`选项${index + 1}`"
      :plain="!item.checked"
      type="warning"
      :name="index"
      @click="radioClick"
    >
    </up-tag>
  </view>
  <!-- 多选 -->
  <view
    class="u-page__tag-item"
    v-for="(item, index) in checkboxs"
    :key="index"
  >
    <up-tag
      :text="`选项${index + 1}`"
      :plain="!item.checked"
      type="warning"
      :name="index"
      @click="checkboxClick"
    >
    </up-tag>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        radios: [
          {
            checked: true,
          },
          {
            checked: false,
          },
          {
            checked: false,
          },
        ],
        checkboxs: [
          {
            checked: true,
          },
          {
            checked: false,
          },
          {
            checked: false,
          },
        ],
      };
    },
    methods: {
      radioClick(name) {
        this.radios.map((item, index) => {
          item.checked = index === name ? true : false;
        });
      },
      checkboxClick(name) {
        this.checkboxs[name].checked = !this.checkboxs[name].checked;
      },
    },
  };
</script>
<style>
.u-page__tag-item {
  margin-right: 20px;
}
</style>

此页面源代码地址

页面源码地址

 github  gitee

API

Props

参数	说明	类型	默认值	可选值
type	主题类型	String	primary	success / info / warning / error
disabled	不可用	Boolean | String	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	-	-

Event

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