checkboxButton

基础用法

ykc-checkbox-button 的基础用法。

星期一 星期二 星期三 星期四再过一天星期五 星期五 星期六好开心 星期日

<template>
  <div class="ykc-checkbox-button-demo">
    <ykc-checkbox-button
      :data="dataBtn"
      v-model="selectCheckbox"
      @change="checkboxChange"
      :configSet="props"
      :checkboxStyle="{ width: 87, height: 28 }"
      type="button"></ykc-checkbox-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 组件使用数据源
        selectCheckbox: ['1'],
        dataBtn: [
          {
            value: '1',
            label: '星期一',
          },
          {
            value: '2',
            label: '星期二',
          },
          {
            value: '3',
            label: '星期三',
          },
          {
            value: '4',
            label: '星期四再过一天星期五',
          },
          {
            value: '5',
            label: '星期五',
          },
          {
            value: '6',
            label: '星期六好开心',
          },
          {
            value: '7',
            label: '星期日',
          },
        ],
        props: {
          label: 'label',
          value: 'value',
        },
      };
    },
    created() {},
    methods: {
      /**
       * 组件change方法调用信息提示
       */
      checkboxChange(e) {
         this.$message(`选择value为${e.join()}`);
      },
    },
  };
</script>

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

Attributes

参数	必填	说明	类型	可选值	默认值	备注
data	是	数据源	Array	—	[]	[ {value:"xxx",id:"xxx",disabled:true/false }, ] value,id:对应的值,disabled:true 表示禁用
disableList	否	禁用集合	Array	—	[]	—
v-model	是	绑定值	string	''	—	—
max	否	最大选择个数	Number	—	—	—
min	否	最小选择个数	Number	—	—	—
configSet	否	配置选项，具体看备注说明	object	—	value,id	配置项为Object,配置数据key,包含label,value属性，列如：{label:'value',value:'id'}

Events

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