多选框

基础用法

• 示例：

点击查看代码

<template>
  <z-checkbox v-model:checked="check">单选</z-checkbox>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'checkboxDemo1',
  setup(){
    const check = ref(false)
    return {
      check
    }
  }
})
</script>

全选

• 示例：

点击查看代码

<template>
  <z-checkbox
    v-model:checked="checkAll"
    :indeterminate="indeterminate"
    @change="onCheckAllChange"
  >
    全选
  </z-checkbox>
  <z-divider style="margin: 10px 0" />
  checkedList : {{ checkedList }}
  <z-checkbox-group v-model:value="checkedList" :options="plainOptions" />
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from 'vue'
const plainOptions = ['Apple', 'Pear', 'Orange']

export default defineComponent({
  name: 'checkboxDemo2',
  setup(){
    const state = reactive({
      indeterminate: true,
      checkAll: false,
      checkedList: ['Apple', 'Orange']
    })
    const onCheckAllChange = e => {
      Object.assign(state, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false
      })
    }
    watch(() => state.checkedList, val => {
      state.indeterminate = !!val.length && val.length < plainOptions.length
      state.checkAll = val.length === plainOptions.length
    })
    return { ...toRefs(state),
      plainOptions,
      onCheckAllChange
    }
  }
})
</script>

禁用

• 示例：

点击查看代码

<template>
  <z-checkbox v-model:checked="check1" :disabled="disabled">未选中</z-checkbox>
  <div style="margin: 5px 0" />
  <z-checkbox v-model:checked="check2" :disabled="disabled">选中</z-checkbox>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'checkboxDemo3',
  setup(){
    const check1 = ref(false)
    const check2 = ref(true)
    const disabled = ref(true)
    return {
      check1,
      check2,
      disabled
    }
  }
})
</script>

多选

• 示例：

点击查看代码

<template>
  <z-checkbox-group
    v-model:value="value1"
    name="checkboxgroup"
    :options="plainOptions"
  />
  <div style="margin: 10px 0" />
  <z-checkbox-group v-model:value="value2" :options="plainOptions" />
  <div style="margin: 10px 0" />
  <z-checkbox-group v-model:value="value3" :options="options" />
  <div style="margin: 10px 0" />
  <z-checkbox-group v-model:value="value3" :options="optionsWithDisabled">
    <template #label="{ value }">
      <span style="color: red">{{ value }}</span>
    </template>
  </z-checkbox-group>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue'
const plainOptions = ['Apple', 'Pear', 'Orange']
const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange', disabled: true }
]
const optionsWithDisabled = [
  { value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange', disabled: false }
]

export default defineComponent({
  name: 'checkboxDemo4',
  setup(){
    const state = reactive({
      value1: [],
      value2: ['Apple'],
      value3: ['Pear']
    })
    return {
      plainOptions,
      options,
      optionsWithDisabled,
      ...toRefs(state)
    }
  }
})
</script>

Checkbox Props

参数	说明	类型	默认值
autofocus	自动获取焦点	boolean	false
checked(v-model)	指定当前是否选中	boolean	false
disabled	失效状态	Boolean	false
indeterminate	设置 indeterminate 状态，只负责样式控制	Boolean	false
value	与 CheckboxGroup 组合使用时的值	boolean | string | number	---

Checkbox Event

事件	说明	回调参数
change	变化时回调函数	function(e:Event)

Checkbox Group Props

参数	说明	类型	默认值
disabled	整组失效	boolean	false
name	CheckboxGroup 下所有 input[type="checkbox"] 的 name 属性	string	---
options	指定可选项，可以通过 slot="label" slot-scope="option" 定制label	string[] | Array<{ label: string value: string disabled?: boolean, indeterminate?: boolean, onChange?: function }>	[]
value(v-model)	指定选中的选项	string[]	[]

Checkbox Group Event

事件	说明	回调参数
change	变化时回调函数	function(checkedValue)

Checkbox Method

名称	描述
blur()	移除焦点
focus()	获取焦点