GG

# gg-checkbox-tag 多选框 - 标签

gg-checkbox-tag

多选标签，一般和表单配合使用，默认为实心白色背景。

在 script 中引用组件

若使用uni-app的 easycom 引入方式，则无需在script中重复引用

import ggCheckboxTag from '@/components/gg-checkbox-tag/gg-checkbox-tag.vue'
export default {
    components: {ggCheckboxTag}
}
1
2
3
4

在 template 中使用组件

<gg-checkbox-tag label="多选" v-model="formData.checkboxTag"  :dataLists="checkLists" :maxNumber="maxNumber" />
1

script

export default {
  data() {
    return {
      formData: {
        checkbox: ['2', '4'],
        checkboxTag: '2,4',
      },
      maxNumber:3,
      checkLists: [
        { value: '0', text: '橘子' },
        { value: '1', text: '柠檬' },
        { value: '2', text: '香蕉' },
        { value: '3', text: '苹果' },
        { value: '4', text: '榴莲' },
      ],
    };
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 属性说明

属性名 类型 默认值 说明
label String - 左边文字
v-model Array - 双向绑定数据,gg-checkbox-tag类型为:String
labelWidth Number 60 左侧文字区域宽度
layout String row 排列规则:可选值['row','col']
dataType String 'value' 数据类型 :['value','text']
dataLists [Array, String] - 选项数组
dataUrl Array - dataLists的网络请求地址
dataValue String 'value' dataLists中value的标识
datatext String 'text' dataLists中text的标识
data-checked String 'checked' dataLists中checked的标识
max-number Number 0 最大选中数量

# 插件预览地址

← 地址 →