uniapp组件-uni-tag标签

旧城等待， 2021-07-25 22:48 1483阅读 0赞

官方示例：[https://ext.dcloud.net.cn/plugin?id=35][https_ext.dcloud.net.cn_plugin_id_35]

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

## 一、实心标签 ##

![20210302005432531.png][]

<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>

## 二、空心标签 ##

![20210302005503401.png][]

<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>

## 三、圆角样式 ##

![20210302005538937.png][]

<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>

## 四、标记样式 ##

![20210302005619178.png][]

<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>

## 五、点击事件 ##

![20210302005733608.gif][]

<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>

## 六、小标签 ##

![20210302005918786.png][]

<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>

## 七、不可点击状态 ##

![20210302005943139.png][]

<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>

[https_ext.dcloud.net.cn_plugin_id_35]: https://ext.dcloud.net.cn/plugin?id=35
[20210302005432531.png]: https://img-blog.csdnimg.cn/20210302005432531.png
[20210302005503401.png]: https://img-blog.csdnimg.cn/20210302005503401.png
[20210302005538937.png]: https://img-blog.csdnimg.cn/20210302005538937.png
[20210302005619178.png]: /images/20210725/54e68534353f4c059757103d6053dafa.png
[20210302005733608.gif]: https://img-blog.csdnimg.cn/20210302005733608.gif
[20210302005918786.png]: https://img-blog.csdnimg.cn/20210302005918786.png
[20210302005943139.png]: https://img-blog.csdnimg.cn/20210302005943139.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1483人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp的map组件

uni-app 地图使用的是腾讯地图注：中间不能有多个并列，不然编译不通过。 vue模板只能有一个根目录 <template> <view>

刺骨的言语ヽ痛彻心扉/ 2022年12月08日 05:37/ 0 赞/ 480 阅读

相关 uniapp loading 组件

> 组件：loading.vue <template> <view> <view class="cu-load load-modal" v-if

「爱情、让人受尽委屈。」/ 2021年09月19日 16:36/ 0 赞/ 913 阅读

相关 uniapp组件-ui-list列表

目录一、基本用法二、显示图标或图片三、右侧显示 switch/badge 四、使用插槽 -------------------- 官方示例：[https:/

小咪咪/ 2021年09月07日 06:14/ 0 赞/ 1131 阅读

相关 uniapp组件汇总

1. [Card卡片][Card] 2. [uni-swiper-dot轮播图指示点][uni-swiper-dot] 3. [Section章节标题][Section]

「爱情、让人受尽委屈。」/ 2021年09月07日 06:13/ 0 赞/ 706 阅读

相关 uniapp组件-Card卡片

官方组件：[https://ext.dcloud.net.cn/plugin?id=22][https_ext.dcloud.net.cn_plugin_id_22] 效

青旅半醒/ 2021年07月26日 02:24/ 0 赞/ 1414 阅读

相关 uniapp组件-uni-tag标签

官方示例：[https://ext.dcloud.net.cn/plugin?id=35][https_ext.dcloud.net.cn_plugin_id_35] Tag

旧城等待，/ 2021年07月25日 22:48/ 0 赞/ 1484 阅读

相关 uniapp组件-uni-icons 图标

官网示例：[https://ext.dcloud.net.cn/plugin?id=28][https_ext.dcloud.net.cn_plugin_id_28] 例

比眉伴天荒/ 2021年07月25日 22:02/ 0 赞/ 1557 阅读

相关 uniapp组件-button按钮

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

川长思鸟来/ 2021年07月25日 14:27/ 0 赞/ 1578 阅读

相关 uniapp组件-uni-rate评分

官方示例：[https://ext.dcloud.net.cn/plugin?id=33][https_ext.dcloud.net.cn_plugin_id_33] 评分组

Bertha 。/ 2021年07月25日 11:18/ 1 赞/ 1376 阅读

相关 uniapp 组件传参

父组件 <v-sub @returnDate=returnDate :backGround=backGround></v-sub> import v

我会带着你远行/ 2021年07月24日 13:11/ 0 赞/ 557 阅读