gui-stags 功能标签组件基于标签形式实现标签的选择和删除功能;
gui-stags : /graceUI/组件目录/gui-stags
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
属性名称 | 类型 | 默认值 | 作用 |
width | Number | 0 | 组件宽度,单位 rpx,0 代表自动宽度 |
text | String | '' | 标签文本 |
size | Number | 26 | 文本尺寸,单位 rpx |
lineHeight | Number | 1.8 | 行高比例,高度、行高=文本尺寸*行高比例 |
padding | Number | 15 | 内间距,单位 rpx |
margin | Number | 15 | 组件右侧、底部间距,单位 rpx |
defaultBg | String | gui-bg-blue | 组件背景样式 |
defaultColor | String | gui-primary-color | 文本颜色样式 |
borderRadius | Number | 6 | 圆角尺寸,单位 rpx |
tags | Array | [] | 标签项目数据,格式见演示代码 |
type | String | radio | radio 单选,checkbox 多选,remove 可删除 |
checkedBg | String | gui-bg-blue | 标签选中背景样式 |
checkedColor | String | gui-color-white | 标签选中文本样式 |
change : 组件数据变化时触发,携带数据:
01 单选 :
有选中的项目 : {选中项目的数据 }, {标签数据};
无选中的项目 : -1, {标签数据}
02 多选 : [ 数组形式的多选项目的索引], {标签数据};
03 删除 : 删除后新的 [ 标签数据 ];