uniapp中uview组件库丰富的tab标签

最新推荐文章于 2024-03-27 15:04:38 发布

TechWhiz-晓同

最新推荐文章于 2024-03-27 15:04:38 发布

阅读量1k

点赞数 8

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/m0_72603435/article/details/135260231

版权

uniapp 专栏收录该内容

79 篇文章 1 订阅

订阅专栏

Tag 标签

tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景

基本使用

通过type参数设置主题类型，默认为primary
属性text设置标签内容

<u-tag text="标签" plain size="mini" type="warning"></u-tag>

#自定义主题

<u-tag text="标签"></u-tag>
<u-tag text="标签" type="warning"></u-tag>
<u-tag text="标签"type="success"></u-tag>
<u-tag text="标签" type="error"></u-tag>

#圆形标签

类似胶囊形状

<u-tag text="标签" plain shape="circle"></u-tag>
<u-tag text="标签" type="warning" shape="circle"></u-tag>

#镂空标签

<u-tag text="标签" plain > </u-tag>
<u-tag text="标签" type="warning" plain></u-tag>
<u-tag text="标签" type="success" plain></u-tag>
<u-tag text="标签" type="error" plain></u-tag>

#镂空带背景色

添加plainFill属性镂空带背景色

<u-tag text="标签" plain > </u-tag>
<u-tag text="标签" type="warning" plain plainFill></u-tag>
<u-tag text="标签" type="success" plain plainFill></u-tag>
<u-tag text="标签" type="error" plain plainFill></u-tag>

#自定义尺寸

size属性为您提供了三种规格的标签大小，默认中等。

<u-tag text="标签" plain size="mini"></u-tag>
<u-tag text="标签" type="warning"></u-tag>
<u-tag text="标签" type="success" plain size="large"></u-tag>

#可关闭标签

tag在右上角提供了删除标签的样式

<u-tag text="标签" size="mini" closable :show="close1" @close="close1 = false"></u-tag>
<u-tag text="标签" type="warning" closable :show="close2" @close="close2 = false"></u-tag>
<u-tag text="标签" type="success" plain size="large" 
closable :show="close3" @close="close3 = false"></u-tag>

<script>
	export default {
		data() {
			return {
				close1: true,
				close2: true,
				close3: true,
				radios: [{
						checked: true
					},
					{
						checked: false
					},
					{
						checked: false
					}
				],
				checkboxs: [{
						checked: true
					},
					{
						checked: false
					},
					{
						checked: false
					}
				]
			}
		},
	}
</script>

#带图片和图标

<u-tag text="标签" size="mini" icon="map" plain></u-tag>
<u-tag text="标签" type="warning" icon="tags-fill"></u-tag>
<u-tag text="标签" type="success" plain size="large"
icon="https://cdn.uviewui.com/uview/example/tag.png"></u-tag>

#单选标签和多选标签

我们为您提供了单选和多选的事件，您可以在事件中获取参数列表

<template>
<!-- 单选 -->
<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
	<u-tag :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index"
		@click="radioClick">
	</u-tag>
</view>
<!-- 多选 -->
<view class="u-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
	<u-tag :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index"
		@click="checkboxClick">
	</u-tag>
</view>
</template>
<script>
	export default {
		data() {
			return {
				radios: [{
						checked: true
					},
					{
						checked: false
					},
					{
						checked: false
					}
				],
				checkboxs: [{
						checked: true
					},
					{
						checked: false
					},
					{
						checked: false
					}
				]
			}
		},
		methods: {
			radioClick(name) {
				this.radios.map((item, index) => {
					item.checked = index === name ? true : false
				})
			},
			checkboxClick(name) {
				this.checkboxs[name].checked = !this.checkboxs[name].checked
			}
		}
	}
</script>
<style lang="scss">
	.u-page__tag-item {
		margin-right: 20px;
	}
</style>