外观
功能标签
Jobs by vuejobs.com
提示
功能标签组件基于标签形式实现标签的选择和删除功能；
演示代码
html
<!-- 单选 -->
<page-check-tags :tags="tags" @change="change1"></page-check-tags>
<!-- 多选 -->
<page-check-tags :tags="tags2" :padding="30" :lineHeight="2.2" @change="change2" type="checkbox"></page-check-tags>
<!-- 可删标签 -->
<page-check-tags :tags="tags3" :padding="30" :lineHeight="2.2" @change="change3" type="remove"></page-check-tags>
js
data(){
return {
tags:[
{id:1,text:"标签1",checked:false},
{id:1,text:"标签2",checked:false},
{id:1,text:"标签3",checked:false},
{id:1,text:"标签4",checked:false},
{id:1,text:"标签5",checked:false}
]
}
}
Attributes
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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 | 标签选中文本样式 |
Event
change事件
change : 组件数据变化时触发，携带数据:
- 单选 :
- 有选中的项目 : {选中项目的数据 }, {标签数据}；
- 无选中的项目 : -1,
- 多选 : [ 数组形式的多选项目的索引], {标签数据};
- 删除 : 删除后新的 [ 标签数据 ]
上次更新: