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 |
defaultClass | Array | ['gui-bg-gray', 'gui-dark-bg-level-1', 'gui-primary-text','gui-dark-text-level-5'] | 默认样式 |
checkedClass | Array | ['gui-bg-primary', 'gui-dark-bg', 'gui-color-white'] | 选中样式 |
borderRadius | Number | 6 | 圆角尺寸,单位 rpx |
tags | Array | [] | 标签项目数据,格式见演示代码 |
type | String | radio | radio 单选,checkbox 多选,remove 可删除 |
change : 组件数据变化时触发,携带数据 :
01 单选 :
有选中的项目 : {选中项目的数据 }, {标签数据};
无选中的项目 : -1, {标签数据}
02 多选 : [ 数组形式的多选项目的索引], {标签数据};
03 删除 : 删除后新的 [ 标签数据 ];