uv-ui

# Tag 标签

✈

组件名：uv-tags

点击下载&安装 (opens new window)

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

# 平台兼容性

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

# 基本使用

  • 通过type参数设置主题类型，默认为primary
  • 属性text设置标签内容
<uv-tags text="标签" plain size="mini" type="warning"></uv-tags>

# 自定义主题

<uv-tags text="标签"></uv-tags>
<uv-tags text="标签" type="warning"></uv-tags>
<uv-tags text="标签"type="success"></uv-tags>
<uv-tags text="标签" type="error"></uv-tags>

# 圆形标签

  • 类似胶囊形状
<uv-tags text="标签" plain shape="circle"></uv-tags>
<uv-tags text="标签" type="warning" shape="circle"></uv-tags>

# 镂空标签

<uv-tags text="标签" plain > </uv-tags>
<uv-tags text="标签" type="warning" plain></uv-tags>
<uv-tags text="标签" type="success" plain></uv-tags>
<uv-tags text="标签" type="error" plain></uv-tags>

# 镂空带背景色

  • 添加plainFill属性镂空带背景色
<uv-tags text="标签" plain > </uv-tags>
<uv-tags text="标签" type="warning" plain plainFill></uv-tags>
<uv-tags text="标签" type="success" plain plainFill></uv-tags>
<uv-tags text="标签" type="error" plain plainFill></uv-tags>

# 自定义尺寸

  • size属性为您提供了三种规格的标签大小，默认中等。
<uv-tags text="标签" plain size="mini"></uv-tags>
<uv-tags text="标签" type="warning"></uv-tags>
<uv-tags text="标签" type="success" plain size="large"></uv-tags>

# 可关闭标签

  • tag在右上角提供了删除标签的样式
<template>
	<view>
		<uv-tags text="标签" size="mini" closable :show="close1" @close="close1 = false"></uv-tags>
		<uv-tags text="标签" type="warning" closable :show="close2" @close="close2 = false"></uv-tags>
		<uv-tags 
			text="标签" 
			type="success" 
			plain 
			size="large" 
			closable 
			:show="close3" 
			@close="close3 = false">
		</uv-tags>
	</view>
</template>
<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>

# 带图片和图标

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

# 单选标签 和 多选标签

  • 我们为您提供了单选和多选的事件，您可以在事件中获取参数列表
<template>
	<view>
		<!-- 单选 -->
		<!-- <view class="uv-page__tag-item" v-for="(item, index) in radios" :key="index">
			<uv-tags :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index" @click="radioClick">
			</uv-tags>
		</view> -->
		<!-- 多选 -->
		<view class="uv-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
			<uv-tags 
				:text="`选项${index + 1}`" 
				:plain="!item.checked" 
				type="warning" 
				:name="index" 
				@click="checkboxClick">
			</uv-tags>
		</view>
	</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 lang="scss">
	.uv-page__tag-item {
		margin-right: 20px;
	}
</style>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Tag Props

参数 说明 类型 默认值 可选值
type 主题类型 String primary primary |success | info | warning | error
disabled 不可用 Boolean | String false -
size 标签大小 String medium medium | large |mini
shape 标签形状 String square circle | square
text 标签的文字内容 String | Number - -
bgColor 背景颜色，默认为空字符串，即不处理 String #C6C7CB -
color 标签字体颜色，默认为空字符串，即不处理 String - -
borderColor 标签的边框颜色 String - -
closeColor 关闭按钮图标的颜色 String - -
name 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了 String | Number - -
plainFill 镂空时是否填充背景色 Boolean false true | false
plain 是否镂空 Boolean false true | false
closable 是否可关闭，设置为true，文字右边会出现一个关闭图标 Boolean false true | false
show 标签显示与否 Boolean true true | false
icon 内置图标，或绝对路径的图片 String - -
cellChild 是否属于cell节点下。nvue模式下的该组件在cell或uv-list等组件下使用，该值最好是设置成true，避免回收后不显示的BUG。 Boolean false true | false

# Tag Event

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

← LineProgress 线形进度条 →