Checkbox

封装多选框组件

使用

基础用法

传入 data 数据将自动生成选项

<template>
  <pro-checkbox
    v-model="checkbox"
    :data="data"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const checkbox = ref([])
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      checkbox,
      data,
    }
  },
})
</script>

控制不可选项目

将传入 data 数据中的某项设置为 disabled: true 即可

<template>
  <pro-checkbox
    v-model="checkbox"
    :data="list"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const checkbox = ref([])
    const list = ref([
      { value: 'Go', label: 'go', disabled: true },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      checkbox,
      list,
    }
  },
})
</script>

配置绑定数据键值

通过 config 配置数据键值。value- v-model 绑定的键值、label-显示键值、disabled-控制不可选的键值、name-原生 name 的键值

<template>
  <pro-checkbox
    v-model="checkbox"
    :data="data"
    :config="config"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const checkbox = ref([])
    const config = ref({ value: 'label', label: 'value' })
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      checkbox,
      config,
      data,
    }
  },
})
</script>

按钮样式

使用 pro-checkbox-button 显示按钮样式的多选框组

<template>
  <pro-checkbox-button
    v-model="checkboxbutton"
    :data="data"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const checkboxbutton = ref([])
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      checkboxbutton,
      data,
    }
  },
})
</script>

Checkbox 配置

参数说明类型可选值默认值
v-model绑定值array--
data绑定数据array--
config配置绑定数据键值object-{ value: ‘value’, label: ‘label’, disabled: ‘disabled’, name: ‘name’ }
size尺寸stringlarge / default /small-
disabled是否禁用boolean-false
min可被勾选的的最小数量number--
max可被勾选的的最大数量number--
text-color按钮形式激活时的文本颜色string-#ffffff
fill按钮形式激活时的填充色和边框色string-#409EFF
validate-event输入时是否触发表单的校验boolean-true

Checkbox 事件

名称说明回调参数
change绑定值变化时触发的事件选中的 label 值

CheckboxButton

封装多选框按钮组件

CheckboxButton 配置

参数说明类型可选值默认值
v-model绑定值array--
data绑定数据array--
config配置绑定数据键值object-{ value: ‘value’, label: ‘label’, disabled: ‘disabled’, name: ‘name’ }
size尺寸stringlarge / default /small-
disabled是否禁用boolean-false
min可被勾选的的最小数量number--
max可被勾选的的最大数量number--
text-color按钮形式激活时的文本颜色string-#ffffff
fill按钮形式激活时的填充色和边框色string-#409EFF

CheckboxButton 事件

名称说明回调参数
change绑定值变化时触发的事件选中的 label 值