DataTag 标签选择 V1.6.0+

概述

DataTag 标签选择，通过数据驱动的单选标签和复选标签。

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiDataTag from "@/components/firstui/fui-data-tag/fui-data-tag.vue"
export default {
	components:{
		fuiDataTag
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

单选标签

通过 options 属性设置标签选择列表数据。

<fui-data-tag :options="options" @change="change"></fui-data-tag>

data() {
		return {
			options: ['选项一', '选项二', '选项三', '选项四']
		}
	},
	methods: {
		change(e) {
			console.log(e.detail.value)
		}
	}
}

复选标签/带角标

通过 multiple 属性设置是否为复选标签，mark 属性设置选中时是否展示角标，options 属性设置标签选择列表数据。

<fui-data-tag multiple mark :options="options" @change="change"></fui-data-tag>

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
options	Array	标签列表数据，具体格式见下方说明	[ ]	-
modelValue Vue3	Array, String, Number	初始选中值，vue3时使用	[ ]	-
value Vue2	Array, String, Number	初始选中值，vue2时使用	[ ]	-
multiple	Boolean	是否可多选	false	-
min	Number, String	最小选择数，仅单选时有效，可选值：0、1	1	-
multipleMin V1.8.0+	Number, String	最小选择数，仅多选时有效	0	-
max	Number, String	最大选择数，仅复选时有效，值为-1时则不限制	-1	-
width	Number, String	标签宽度，为0时则为auto，单位rpx	0	-
height	Number, String	标签高度，为0时则为auto，单位rpx	0	-
padding	Array	标签padding值，[上，右，下，左]	['16rpx', '32rpx']	-
gap	Number, String	各标签之间间距，单位rpx	20	-
radius	Number, String	标签圆角值，单位rpx	6	-
size	Number, String	标签字体大小，单位rpx	24	-
color	String	标签字体颜色	#333	-
activeColor	String	标签选中时字体颜色	#465CFF	-
background	String	标签背景色	#fff	-
activeBgColor	String	标签选中时背景色	#fff	-
defaultBorderColor V1.9.5+	String	标签默认边框颜色，未设置则默认使用背景色	-	-
borderColor	String	标签选中时边框颜色	#465CFF	-
mark	Boolean	标签选中时是否显示角标，设为true时，圆角值不建议设置过大	false	-
markSize	Number, String	角标字体大小，单位rpx	52	-
markColor	String	角标颜色	#465CFF	-
nowrap V2.1.0+	Boolean	标签列表是否强制一行显示，外层需要自行设置横向滚动容器	false	-

//options 属性数据格式说明：

//第一种，字符串数组（注意：内容不可重复）

options: ['选项一', '选项二', '选项三', '选项四']

//第二种：

options:[{
	//显示文本，必填
	text:'',
	//值，必填（注意：值不可重复）
	value:'',
	//【V1.8.0+】是否为全选按钮，仅可设置其中一个为true，当含true选项时，其他标签与全选标签互斥，仅多选时有效。
	isAll:false,
	//是否禁用，默认值false
	disable:false
}]

Events

注：@change事件item项返回自v2.0.0+开始支持

事件名	说明	回调参数
@change	点击标签时触发	event.detail = {   value:value   item:item项 }
@input	点击标签时触发input事件,vue2下可使用v-model指令	value
@update:modelValue Vue3	用于组件的双向绑定,使用v-model指令即可	value

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)