uView

# Tag 标签

该组件一般用于标记和选择，有如下特点：

  • mode参数可以设置3种模式，dark(深色背景)、light(浅色背景)、plain(白色背景)
  • shape参数可以设置多种形状，circle（两边半圆形）, square（方形，带圆角），circleLeft（左边半圆），circleRight（右边半圆）
  • type参数可以设置4种主题，primary，success，warning，error

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ √ √ √ √

# 基本使用

  • 通过type参数设置主题类型，默认为primary
  • text设置标签内容
<u-tag text="雪月夜" type="success" />
<template>
<view>
	<u-toast ref="uToast"></u-toast>
	<u-tag :theme="theme" :text="text" :type="type" :shape="shape" :closeable="closeable" :mode="mode" @close="close" @click="click" :show="show" :size="size" />
</view>
</template>

<script>
export default {
	data() {
		return {
			theme: 'normal',
			text: '标签',
			mode: 'light',
			type: 'error',
			size: 'default',
			shape: 'square',
			closeable: false,
			show: true
		};
	},
	methods: {
		click(index) {
			this.$refs.uToast.show({
				title: `第${index + 1}个标签被点击`,
				type: 'success'
			});
		},
		close(index) {
			this.$refs.uToast.show({
				title: `关闭图标被点击`,
				type: 'success'
			});
		}
	}
};
</script>

# 设置标签的类型

  • 通过设置mode参数，可以设置标签的类型，dark(深色背景)、light(浅色背景)、plain(白色背景)
<u-tag text="一丘之貉" mode="dark" />
<u-tag text="沆瀣一气" mode="light" />
<u-tag text="狼狈为奸" mode="plain" />

# 设置标签的形状

通过shape参数，可以设置标签的形状，默认是square（方形，带圆角），可选：circle（两边半圆形）, circleLeft（左边半圆），circleRight（右边半圆）

<u-tag text="主谓宾" shape="circle" />
<u-tag text="定状补" shape="circleLeft" />

# 设置标签是否可以关闭

设置closeable参数为true，会在标签上自动添加一个关闭图标
设置可关闭后，点击关闭按钮，会发出close事件，回调中手动设置show参数为false，可以隐藏Tag

<template>
	<u-tag text="要清楚" closeable :show="show" @close="tagClick" />
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		},
		methods: {
			tagClick(index) {
				this.show = false;
			}
		}
	}
</script>

# API

# Props

参数 说明 类型 默认值 可选值
theme
FPI
 主题模式，普通模式normal，关怀模式care String normal care
type 主题类型 String primary success / info / warning / error
size 标签大小 String default mini
shape 标签形状 String square circle / circleLeft / circleRight
text 标签的文字内容 String - -
bg-color 自定义标签的背景颜色，type将失效 String - -
color 文字的颜色 String - -
border-color 标签的边框颜色 String - -
close-color 关闭按钮的颜色 String - -
index 点击标签时，会通过click事件返回该值 String | Number - -
mode 模式选择，见上方说明 String light dark / plain
closeable 是否可关闭，设置为true，文字右边会出现一个关闭图标 Boolean false true
show 标签显示与否 Boolean true false

# Event

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

← Input 输入框 →