基础用法

• 与elm较为不同的是通过options来设置并不是在dom上添加

<template>
  <higher-checkbox
    v-model="sendData"
    :list="list"
  />
</template>
<script>
  export default {
    data() {
      return {
        sendData: [],
        list: [{
          label: '选项1',
          value: 'option1'
        }, {
          label: '选项2',
          value: 'option2'
        }, {
          label: '选项3',
          value: 'option3'
        }, {
          label: '选项4',
          value: 'option4'
        }]
      }
    }
  }
</script>

Expand Copy Copy

单个多选

• 单个的情况下设置的值应该是布尔值

• 3.5.4之后不允许出现单个使用通过list length=1来设置

<template>
  <higher-checkbox
    v-model="sendData"
    label="选项1"
  />
</template>
<script>
  export default {
    data() {
      return {
        sendData: false
      }
    }
  }
</script>

Expand Copy Copy

禁用状态

• 设置disabled属性即可。

<template>
  <higher-checkbox
    v-model="sendData"
    :list="list"
  />
</template>
<script>
  export default {
    data() {
      return {
        sendData: ['option2'],
        list: [{
          label: '选项1',
          value: 'option1'
        }, {
          label: '选项2',
          value: 'option2',
          disabled: true
        }, {
          label: '选项3',
          value: 'option3',
          disabled: true
        }, {
          label: '选项4',
          value: 'option4'
        }]
      }
    }
  }
</script>

Expand Copy Copy

设置全选

• 设置showAll属性即可。
• 设置allText属性可更改文本默认全选

<template>
  <higher-checkbox
    v-model="sendData"
    :list="list"
    showAll
  />
</template>
<script>
  export default {
    data() {
      return {
        sendData: ['option2'],
        list: [{
          label: '选项1',
          value: 'option1',
          disabled: true
        }, {
          label: '选项2',
          value: 'option2'
        }, {
          label: '选项3',
          value: 'option3'
        }, {
          label: '选项4',
          value: 'option4'
        }]
      }
    }
  }
</script>

Expand Copy Copy

带有边框

• 设置border属性可以渲染为带有边框的多选框。
• 也可以通过直接添加 border为true来设置全部为带边框

<higher-checkbox
  v-model="sendData"
  :list="list"
  border
/>

<template>
  <higher-checkbox
    v-model="sendData"
    :list="list"
  />
</template>
<script>
  export default {
    data() {
      return {
        sendData: [],
        list: [{
          label: '选项1',
          value: 'option1',
          border: true
        }, {
          label: '选项2',
          value: 'option2'
        }, {
          label: '选项3',
          value: 'option3'
        }, {
          label: '选项4',
          value: 'option4'
        }]
      }
    }
  }
</script>

Expand Copy Copy

按钮样式

只需要把component-name的值替换为checkbox-button即可

<template>
  <div>
    <higher-checkbox
      v-model="checkboxGroup1"
      :list="list"
      component-name="checkbox-button"
    />
    <higher-checkbox
      style="margin-top:20px;"
      size="medium"
      v-model="checkboxGroup2"
      :list="list"
      component-name="checkbox-button"
    />
    <higher-checkbox
      style="margin-top:20px;"
      size="small"
      v-model="checkboxGroup3"
      :list="list"
      component-name="checkbox-button"
    />
  </div>
</template>
<script>
  export default {
    data () {
      return {
        checkboxGroup1: ['option1'],
        checkboxGroup2: ['option1'],
        checkboxGroup3: ['option1'],
        checkboxGroup4: ['option1'],
        list: [{
          label: '上海',
          value: 'option1'
        }, {
          label: '北京',
          value: 'option2'
        }, {
          label: '广州',
          value: 'option3'
        }, {
          label: '深圳',
          value: 'option4'
        }]
      };
    }
  }
</script>

Expand Copy Copy