uview-ultra v4

Appearance

Tag 标签 ​

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

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基本使用 ​

  • 通过type参数设置主题类型，默认为primary
  • 属性text设置标签内容
html
<up-tag text="标签" plain size="mini" type="warning"></up-tag>

自定义主题 ​

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

圆形标签 ​

  • 类似胶囊形状
html
<up-tag text="标签" plain shape="circle"></up-tag>
<up-tag text="标签" type="warning" shape="circle"></up-tag>

镂空标签 ​

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

镂空带背景色 ​

  • 添加plainFill属性镂空带背景色
html
<up-tag text="标签" plain > </up-tag>
<up-tag text="标签" type="warning" plain plainFill></up-tag>
<up-tag text="标签" type="success" plain plainFill></up-tag>
<up-tag text="标签" type="error" plain plainFill></up-tag>

自定义尺寸 ​

  • size属性为您提供了三种规格的标签大小，默认中等。
html
<up-tag text="标签" plain size="mini"></up-tag>
<up-tag text="标签" type="warning"></up-tag>
<up-tag text="标签" type="success" plain size="large"></up-tag>

可关闭标签 ​

  • tag在右上角提供了删除标签的样式
html
<up-tag text="标签" size="mini" closable :show="close1" @close="close1 = false"></up-tag>
<up-tag text="标签" type="warning" closable :show="close2" @close="close2 = false"></up-tag>
<up-tag text="标签" type="success" plain size="large" 
closable :show="close3" @close="close3 = false"></up-tag>

<script setup>
import { ref, reactive } from 'vue';

const close1 = ref(true);
const close2 = ref(true);
const close3 = ref(true);
const radios = reactive ([
  { checked: true },
  { checked: false },
  { checked: false }
]);
const checkboxs = reactive ([
  { checked: true },
  { checked: false },
  { checked: false }
]);
</script>
html
<up-tag text="标签" size="mini" closable :show="close1" @close="close1 = false"></up-tag>
<up-tag text="标签" type="warning" closable :show="close2" @close="close2 = false"></up-tag>
<up-tag text="标签" type="success" plain size="large" 
closable :show="close3" @close="close3 = false"></up-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>

带图片和图标 ​

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

单选标签 和 多选标签 ​

  • 我们为您提供了单选和多选的事件，您可以在事件中获取参数列表
html
<template>
<!-- 单选 -->
<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
	<up-tag :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index"
		@click="radioClick">
	</up-tag>
</view>
<!-- 多选 -->
<view class="u-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
	<up-tag :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index"
		@click="checkboxClick">
	</up-tag>
</view>
</template>
<script setup>
import { reactive } from 'vue';

const radios = reactive([
  { checked: true },
  { checked: false },
  { checked: false }
]);
const checkboxs = reactive([
  { checked: true },
  { checked: false },
  { checked: false }
]);

const radioClick = (name) => {
  radios.forEach((item, index) => {
    item.checked = index === name;
  });
};

const checkboxClick = (name) => {
  checkboxs[name].checked = !checkboxs[name].checked;
};
</script>
<style lang="scss">
	.u-page__tag-item {
		margin-right: 20px;
	}
</style>
html
<template>
<!-- 单选 -->
<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
	<up-tag :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index"
		@click="radioClick">
	</up-tag>
</view>
<!-- 多选 -->
<view class="u-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
	<up-tag :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index"
		@click="checkboxClick">
	</up-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>

右侧演示页面源代码地址 ​

点击以下链接以查看右侧演示页面的源码


 github  gitee

API ​

Props ​

参数说明类型默认值可选值
type主题类型Stringprimarysuccess / info / warning / error
disabled不可用Boolean | Stringfalse-
size标签大小Stringmediumlarge、mini
shape标签形状Stringsquarecircle
text标签的文字内容String | Number--
bgColor背景颜色，默认为空字符串，即不处理String#C6C7CB-
color标签字体颜色，默认为空字符串，即不处理String--
borderColor标签的边框颜色String--
closeColor关闭按钮图标的颜色String--
name点击时返回的索引值，用于区分例遍的数组哪个元素被点击了String | Number--
plainFill镂空时是否填充背景色Booleanfalsetrue
plain是否镂空Booleanfalsetrue
closable是否可关闭，设置为true，文字右边会出现一个关闭图标Booleanfalsetrue
show标签显示与否Booleantruefalse
icon内置图标，或绝对路径的图片String--

Event ​

事件名说明回调参数版本
click点击标签触发index: 传递的index参数值-
closeclosable为true时，点击标签关闭按钮触发index: 传递的index参数值-