uniapp组件-uni-tag标签

官方示例:https://ext.dcloud.net.cn/plugin?id=35

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>

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页