Checkbox 多选框

Checkbox 多选框用于在一组可选项中进行多项选择。

基本用法

单独使用可以表示两种状态间切换。设置v-model绑定变量，可直接将变量值设置为true或false。 在z-checkbox元素中定义v-model="checked"绑定变量，单一的checkbox表示两种状态（选中与否），checked的状态可以通过change事件来实时获悉。

备选项

<template>
  <z-checkbox v-model="checked">备选项</z-checkbox>
</template>

<script>
  export default {
    data() {
      return {
        checked: true,
      };
    },
  };
</script>

禁用状态

多选框不可用状态。

设置disabled属性即可。

备选项

<template>
  <z-checkbox v-model="checked" disabled>备选项</z-checkbox>
</template>

只读状态

多选框只读不可更改状态。

设置readonly属性即可。

备选项

<template>
  <z-checkbox v-model="checked" readonly>备选项</z-checkbox>
</template>

半选择状态

多选框半选择状态。

设置indeterminate属性即可。

备选项

<template>
  <z-checkbox :indeterminate="im">备选项</z-checkbox>
</template>

多选框组

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示那一项的选项状态。

全选

苹果

香蕉

橙子

<template>
  <z-checkbox
    v-model="checkAll"
    @change="onChange"
    :indeterminate="indeterminate"
    >全选</z-checkbox
  >

  <z-checkbox
    v-model="checkList"
    @change="onItemChange"
    :label="item"
    :value="item"
    v-for="item in renderList"></z-checkbox>
</template>

<script>
  export default {
    data() {
      return {
        checkList: [],
        renderList: ['苹果', '香蕉', '橙子'],
        checkAll: false,
        indeterminate: false,
      };
    },
    methods: {
      onChange() {
        this.checkList = this.checkAll ? this.renderList : [];
        this.indeterminate = false;
      },
      onItemChange(val) {
        this.checkAll = val.length === this.renderList.length;
        this.indeterminate = val.length > 0 && !this.checkAll;
      },
    },
  };
</script>