展示标签

ux-tag

ux-tag 展示标签组件可以通过属性实现各种常见的展示标签；
本组件适用于展示场景，我们还提供了功能标签（提供删除、选择功能），详见手册下一节；

运行图示

组件属性

属性名称	类型	默认值	作用
width	Number	0	组件宽度，单位 rpx，0 代表自动宽度
text	String	''	标签文本
size	Number	26	文本尺寸，单位 rpx
padding	String	6rpx	内间距
margin	String	10rpx	外简介
customClass	Array	['ux-bg-primary', 'ux-color-white']	组件自定义样式
borderRadius	Number	6	圆角尺寸，单位 rpx
data	Array	[]	组件点击时携带的数据
borderColor	String	rgba(255,255,255,0)	组件边框颜色，与背景色相同等于隐藏边框

组件事件

@tapme : 组件被点击时触发，携带数据 data 属性对应的值;

演示代码

<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-row ux-wrap ux-align-items-start">
			<ux-tag 
			text="小标签" 
			:size="22"></ux-tag>
			<ux-tag 
			text="普通标签" 
			:customClass="['ux-bg-grey5','ux-color-black']" 
			padding="12rpx" 
			:size="26"></ux-tag>
			<ux-tag 
			text="大标签" 
			:size="32" 
			padding="15rpx"></ux-tag>
			<ux-tag 
			text="无圆角标签" 
			:size="26" 
			:borderRadius="0"></ux-tag>
			<ux-tag 
			text="大圆角标签" 
			padding="15rpx" 
			:customClass="['ux-bg-orange','ux-color-white']" 
			:borderRadius="50"></ux-tag>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">固定宽度</text>
		<view class="ux-demo ux-row ux-wrap ux-align-items-start">
			<ux-tag
			text="固定宽度" 
			:width="200" 
			:size="28"></ux-tag>
			<ux-tag 
			:width="200" 
			:border-radius="30" 
			text="文本很长会被缩略" 
			:customClass="['ux-bg-orange','ux-color-white', 'ux-line1']" 
			:size="28"></ux-tag>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">点击事件</text>
		<view class="ux-demo ux-row ux-wrap ux-align-items-start">
			<ux-tag 
			text="点击测试" 
			:width="200" 
			:data="['a',1]" 
			@tapme="tapme"
			:size="28"></ux-tag>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">边框标签</text>
		<view class="ux-demo ux-row ux-wrap ux-align-items-start">
			<ux-tag 
			text="边框标签" 
			:customClass="['ux-transparent-bg', 'ux-color-red']" 
			:width="200" 
			:size="28" 
			borderColor="#FF0036"></ux-tag>
			<ux-tag 
			text="边框标签" 
			:customClass="['ux-transparent-bg', 'ux-color-primary']" 
			:width="200" 
			:size="28" 
			:border-radius="30" 
			borderColor="#008AFF"></ux-tag>
		</view>
	</view>
</template>
<script lang="uts">
export default {
	data() {
		return {
			
		}
	},
	methods: {
		tapme : function(data:any[]){
			console.log(data);
		}
	}
}
</script>
<style scoped>
</style>