# Tag标签

Tag标签:可自定义大小,设置字体大小,圆角,镂空等。

# 组件结构

<template>
	<view
		class="tui-tag"
		:hover-class="hover ? 'tui-tag-opcity' : ''"
		:hover-stay-time="150"
		:class="[originLeft ? 'tui-origin-left' : '', originRight ? 'tui-origin-right' : '', getClassName(shape, plain), getTypeClass(type, plain)]"
		:style="{ transform: `scale(${scaleMultiple})`, padding: padding, margin: margin, fontSize: size, lineHeight: size }"
		@tap="handleClick"
	>
		<slot></slot>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: 'tuiTag',
		props: {
			type: {
				type: String,
				default: 'primary'
			},
			//padding
			padding: {
				type: String,
				default: '16rpx 26rpx'
			},
			margin: {
				type: String,
				default: '0'
			},
			//文字大小 rpx
			size: {
				type: String,
				default: '28rpx'
			},
			// circle, square,circleLeft,circleRight
			shape: {
				type: String,
				default: 'square'
			},
			//是否空心
			plain: {
				type: Boolean,
				default: false
			},
			//点击效果
			hover: {
				type: Boolean,
				default: false
			},
			//缩放倍数
			scaleMultiple: {
				type: Number,
				default: 1
			},
			originLeft: {
				type: Boolean,
				default: false
			},
			originRight: {
				type: Boolean,
				default: false
			},
			index: {
				type: Number,
				default: 0
			}
		},
		methods: {
			handleClick() {
				this.$emit('click', { index: this.index });
			},
			getTypeClass: function(type, plain) {
				return plain ? 'tui-' + type + '-outline' : 'tui-' + type;
			},
			getClassName: function(shape, plain) {
				//circle, square,circleLeft,circleRight
				var className = plain ? 'tui-tag-outline ' : '';
				if (shape != 'square') {
					if (shape == 'circle') {
						className = className + (plain ? 'tui-tag-outline-fillet' : 'tui-tag-fillet');
					} else if (shape == 'circleLeft') {
						className = className + 'tui-tag-fillet-left';
					} else if (shape == 'circleRight') {
						className = className + 'tui-tag-fillet-right';
					}
				}
				return className;
			}
		}
	};
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
type String 样式类型,可传入[primary, white, danger, warning, green, gray,black]等 primary
padding String 内边距值 16rpx 26rpx
margin String 外边距值 0
size String 文字大小 单位rpx 28rpx
shape String 形状:circle, square,circleLeft,circleRight square
plain Boolean 是否空心 false
hover Boolean 点击效果 false
scaleMultiple Number 缩放倍数 1
originLeft Boolean 元素的基点位置0 center false
originRight Boolean 元素的基点位置100% center false
index Number 索引 0

# methods

名称 描述
@click 点击事件

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/tag/tag

# H5二维码

# 小程序二维码