uniapp组件-uni-tag标签

官方示例：uni-tag 标签 - DCloud 插件市场

Tag 组件，用于展示1个或多个文字标签，可点击切换选中、不选中的状态

一、实心标签

<template>
	<view>
		<uni-tag text="标签" style="width: 61px;text-align: center;" />
		<uni-tag text="标签" type="primary" style="width: 61px;text-align: center;" />
		<uni-tag text="标签" type="success" style="width: 61px;text-align: center;" />
		<uni-tag text="标签" type="warning" style="width: 61px;text-align: center;" />
		<uni-tag text="标签" type="error" style="width: 61px;text-align: center;" />
	</view>
</template>
 

二、空心标签

<template>
	<view>
		<uni-tag :inverted="true" text="标签" style="width: 61px;text-align: center;" />
		<uni-tag :inverted="true" text="标签" type="primary" style="width: 61px;text-align: center;" />
		<uni-tag :inverted="true" text="标签" type="success" style="width: 61px;text-align: center;" />
		<uni-tag :inverted="true" text="标签" type="warning" style="width: 61px;text-align: center;" />
		<uni-tag :inverted="true" text="标签" type="error" style="width: 61px;text-align: center;" />
	</view>
</template>
 

三、圆角样式

<template>
	<view>
		<uni-tag :circle="true" text="标签" type="primary" size="small" style="width: 61px;text-align: center;" />
		<uni-tag :circle="true" text="标签" type="success" size="small" :inverted="true" style="width: 61px;text-align: center;" />
		<uni-tag :circle="true" text="标签" type="warning" style="width: 61px;text-align: center;" />
		<uni-tag :circle="true" text="标签" type="error" :inverted="true" style="width: 61px;text-align: center;" />
	</view>
</template>

四、标记样式

<template>
	<view>
		<uni-tag :mark="true" text="标签" type="primary" size="small" style="width: 61px;text-align: center;" />
		<uni-tag :mark="true" text="标签" type="success" size="small" :inverted="true" style="width: 61px;text-align: center;" />
		<uni-tag :mark="true" text="标签" type="warning" style="width: 61px;text-align: center;" />
		<uni-tag :mark="true" text="标签" type="error" :inverted="true" style="width: 61px;text-align: center;" />
	</view>
</template>
 

五、点击事件

<template>
	<view>
		<uni-tag :circle="true" :inverted="inverted" text="标签" type="primary" @click="setInverted" style="width: 61px;text-align: center;" />
	</view>
</template>
 
<script>
export default {
	components: {},
	data() {
		return {
			inverted: false
		};
	},
	methods: {
		setInverted() {
			this.inverted = !this.inverted;
		}
	}
};
</script>

六、小标签

<template>
	<view>
		<uni-tag text="标签" size="small" style="width: 61px;text-align: center;" />
		<uni-tag text="标签" type="primary" size="small" style="width: 61px;text-align: center;" />
		<uni-tag text="标签" type="success" size="small" style="width: 61px;text-align: center;" />
		<uni-tag text="标签" type="warning" size="small" :inverted="true" :mark="true" style="width: 61px;text-align: center;" />
		<uni-tag text="标签" type="error" size="small" :inverted="true" :circle="true" style="width: 61px;text-align: center;" />
	</view>
</template>
 

七、不可点击状态

<template>
	<view>
		<uni-tag :disabled="true" text="标签" style="width: 61px;text-align: center;" />
		<uni-tag :disabled="true" text="标签" type="primary" style="width: 61px;text-align: center;" />
		<uni-tag :disabled="true" text="标签" type="error" size="small" :inverted="true" style="width: 61px;text-align: center;" />
	</view>
</template>