checkbox

基础用法

ykc-checkbox 的全选。

全选

江苏 浙江 上海 安徽 山东

<template>   
    <ykc-checkbox
      :data="data"
      :widthArr="[3, 2, 5]"
      v-model="selectCheckbox1"
      :isAllSelect="true"
      :configSet="props"></ykc-checkbox>
</template>

<script>
  export default {
     data() {
      return {
        // 组件使用数据源
        selectCheckbox1: [],
        // 默认数据
        data: [
          {
            value: '1',
            label: '江苏',
          },
          {
            value: '2',
            label: '浙江',
          },
          {
            value: '3',
            label: '上海',
            width: 5,
          },
          {
            value: '4',
            label: '安徽',
          },
          {
            value: '5',
            label: '山东',
          },
        ],
        props: {
          label: 'label',
          value: 'value',
        },
      };
    },
    methods:{
      /**
       * 组件change方法调用信息提示
       */
      checkboxChange: e => {
        this.$message(`选择value为${e.join()}`);
      },
    }
  };
</script>

显示代码 复制代码 复制代码

没有全选，绑定了change事件的

ykc-checkbox 没有全选，绑定了change事件的。

江苏 浙江 上海 安徽 山东

<template>
  <ykc-checkbox
    :data="data1"
    :widthArr="[3, 2, 5]"
    v-model="selectCheckbox"
    @change="checkboxChange"
    :configSet="props"></ykc-checkbox>
</template>

<script>
  export default {
    data() {
      return {
        // 组件使用数据源
        selectCheckbox: ['1', '2'],
        data1: [
          {
            value: '1',
            label: '江苏',
            width: 3,
          },
          {
            value: '2',
            label: '浙江',
          },
          {
            value: '3',
            label: '上海',
          },
          {
            value: '4',
            label: '安徽',
          },
          {
            value: '5',
            label: '山东',
          },
        ],
        props: {
          label: 'label',
          value: 'value',
        },
      };
    },
    methods: {
      /**
       * 组件change方法调用信息提示
       */
      checkboxChange(e) {
        this.$message(`选择value为${e.join()}`);
      },
    },
  }
</script>

显示代码 复制代码 复制代码

限制可选个数

ykc-checkbox 限制可选个数。

最多选2个，最少选1个

江苏 浙江 上海 安徽 山东

<template>
  <h4>最多选2个，最少选1个</h4>
  <ykc-checkbox
    :data="data"
    :widthArr="[3, 2, 5]"
    v-model="selectCheckbox2"
    :max="2"
    :min="1"
    :configSet="props"></ykc-checkbox>
</template>

<script>
  export default {
    data() {
      return {
         // 组件使用数据源
        selectCheckbox2: ['1'],
        data: [
          {
            value: '1',
            label: '江苏',
          },
          {
            value: '2',
            label: '浙江',
          },
          {
            value: '3',
            label: '上海',
            width: 5,
          },
          {
            value: '4',
            label: '安徽',
          },
          {
            value: '5',
            label: '山东',
          },
        ],
        props: {
          label: 'label',
          value: 'value',
        },
      };
    },
  }
</script>

显示代码 复制代码 复制代码

Attributes

参数	必填	说明	类型	可选值	默认值	备注
data	是	数据源	Array	—	[]	[ {value:"xxx",id:"xxx",disabled:true/false }, ] value,id:对应的值,disabled:true 表示禁用
widthArr	是	跟数据源对应一致。需要调整样式的 如数据源[{value:'1',id:'1'},{value:'2',id:'2'}]需要调整第二个的宽度为6个字符长度，则widthArr传入[null, 6]	—	—	—	—
v-model	是	绑定值	string	''	—	—
max	否	最大选择个数	Number	—	—	—
min	否	最小选择个数	Number	—	—	—
isAllSelect	否	是否显示全选	Boolean	true/false	false	—
width	否	样式的宽度	Number	—	54	—
configSet	否	配置选项，具体看备注说明	object	—	value,id	配置项为Object,配置数据key,包含label,value属性，列如：{label:'value',value:'id'}

Events

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