功能标签

组件介绍

ux-stag 功能标签组件基于标签形式实现标签的选择和删除功能；

运行图示

组件属性

属性名称	类型	默认值	作用
width	Number	0	组件宽度，单位 rpx，0 代表自动宽度
size	Number	26	文本尺寸，单位 rpx
padding	String	15rpx	内间距，单位 rpx
margin	String	0 15rpx 0 0	外间距，单位 rpx
fontColor	String	#666666	默认文本颜色
checkedColor	String	#FFFFFF	选中文本颜色
bgColor	String	#F6F6F6	默认背景颜色
checkedBGColor	String	#3688FF	选中背景颜色
tags	Array<UXStagData>	[]<UXStagData>	标签项目数据，格式见演示代码
type	String	radio	radio 单选，checkbox 多选，remove 可删除
borderRadius	Number	6	组件圆角尺寸
data	any[]	any[]	附带数据

组件事件

change : 组件数据变化时触发，携带数据 :

1 单选，携带数据 : 选中项目的数据, 附加数据；
2 多选，携带数据 : 数组形式的多选项目的索引, 附加数据;
3 删除，携带数据 : 删除后新的标签数据, 附加数据;

演示代码

<template>
	<view class="ux-body ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-mt-large">单选演示</text>
		<view class="ux-demo">
			<ux-stag 
			:tags="tags1" 
			:data="[1, 'a']"
			@change="change1"></ux-stag>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">多选演示</text>
		<view class="ux-demo">
			<ux-stag 
			type="checkbox" 
			:tags="tags2" 
			:data="[1, 'a']"
			@change="change2"></ux-stag>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">删除演示</text>
		<view class="ux-demo">
			<ux-stag 
			type="remove" 
			:tags="tags3" 
			:data="[1, 'a']"
			margin="0 15rpx 15rpx 0" 
			@change="change3"></ux-stag>
		</view>
	</view>
</template>
<script lang="uts">
import {UXStagData} from "@/uni_modules/unix-ui/uxts/classes.uts"
export default {
	data() {
		return {
			// 选项数据
			tags1 : [
				new UXStagData(1,"标签1",false),
				new UXStagData(2,"标签2",false),
				new UXStagData(3,"标签3",false),
				new UXStagData(4,"标签4",false),
				new UXStagData(5,"标签5",false),
			] as UXStagData[],
			tags2 : [
				new UXStagData(1,"标签1",false),
				new UXStagData(2,"标签2",false),
				new UXStagData(3,"标签3",false),
				new UXStagData(4,"标签4",false),
				new UXStagData(5,"标签5",false),
			] as UXStagData[],
			tags3 : [
				new UXStagData(1,"标签1",false),
				new UXStagData(2,"标签2",false),
				new UXStagData(3,"标签3",false),
				new UXStagData(4,"标签4",false),
				new UXStagData(5,"标签5",false),
			] as UXStagData[],
		}
	},
	methods: {
		change1 : function (idx:number, data:any) {
			console.log(idx);
			console.log(data);
		},
		change2 : function (idxes:number[], data:any) {
			console.log(idxes);
			console.log(data);
		},
		change3 : function (data:UXStagData[]) {
			console.log(data);
			console.log(data[0].id);
		},
	}
}
</script>
<style scoped>
</style>