功能标签

提示

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

演示代码

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>

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,
多选 : [ 数组形式的多选项目的索引], {标签数据};
删除 : 删除后新的 [ 标签数据 ]

在 GitHub 上编辑此页

上次更新:

功能标签 ​

演示代码 ​

Attributes ​

Event ​

功能标签

演示代码

Attributes

Event