Tag 标签

Tag 标签组件，用于创建一个标签，支持配置标签名称、是否可关闭、鼠标悬停效果、标签效果、标签尺寸、关闭按钮

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="标签">
		<t-card class='mlrt.30' title="Tab 标签" sub-title="轻量级的方式来展示和操作标签信息，支持可关闭、主题样式、动态隐藏以及自定义尺寸和关闭图标样式"></t-card>
		<introduction title="基础功能+状态展示">
			<t-row class="ffww">
				<t-tag class="mrb.15" effect='normal'>默认</t-tag>
				<t-tag class="mrb.15" type="success" effect='normal'>成功</t-tag>
				<t-tag class="mrb.15" type="error" effect='normal'>错误</t-tag>
				<t-tag class="mrb.15" type="primary" effect='normal'>主色</t-tag>
				<t-tag class="mrb.15" type="warning" effect='normal'>警告</t-tag>
			</t-row>
		</introduction>
		<introduction title="可移除标签">
			<t-row class="ffww">
				<t-tag class="mrb.15" :closable="true" effect='l'>默认</t-tag>
				<t-tag class="mrb.15" type="success" :closable="true" effect='l'>成功</t-tag>
				<t-tag class="mrb.15" type="error" :closable="true" effect='l'>错误</t-tag>
				<t-tag class="mrb.15" type="primary" :closable="true" effect='l'>主色</t-tag>
				<t-tag class="mrb.15" :closable="true" effect='normal'>默认</t-tag>
				<t-tag class="mrb.15" type="success" :closable="true" effect='normal'>成功</t-tag>
				<t-tag class="mrb.15" type="error" :closable="true" effect='normal'>错误</t-tag>
				<t-tag class="mrb.15" type="primary" :closable="true" effect='normal'>主色</t-tag>
			</t-row>
		</introduction>
		<introduction title="动态编辑">
			<t-row class="ffww">
				<t-tag v-for="(item,index) in tags" :key="index" :name='`${index}`' class="mrb.15" :closable="true"
					@close="onclose" effect='l'>{{item['name']}}</t-tag>
				<t-button v-if="inputVisible" size='mini' class="w.180" @click="inputVisible=false">+ New Tag</t-button>
				<t-input :auto-focus="true" v-else v-model="inputvalue" size='mini' @blur="blur"
					class="w.150"></t-input>
			</t-row>
		</introduction>
	</t-page>
</template>
<script>
	export default {
		data() {
			return {
				inputVisible: true,
				inputvalue: '',
				tags: [
					{ name: '标签一' },
					{ name: '标签二' },
					{ name: '标签三' },
					{ name: '标签四' },
					{ name: '标签五' }
				]
			}
		},
		methods: {
			blur() {
				if (this.inputvalue != '') this.tags.push({ name: this.inputvalue })
				this.inputvalue = ''
				this.inputVisible = true
			},
			onclose(e : string) {
				console.log(e)
			}
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
name	标签名称	String	''	-
closable	是否可关闭	Boolean	false	true, false
hover	鼠标悬停效果	Boolean	true	true, false
effect	标签效果	String	'plain'	-
size	标签尺寸	String	'mini'	-
closeClass	关闭按钮类名	String	''	-

Events

事件名	描述	回调参数	版本
close	当标签关闭时触发	(name: string)	-

Slots

名称	描述
default	标签内容

Methods

名称	描述	参数
close	关闭标签	-