Checkbox 复选框

示例

尺寸

可选的 ui 属性值：s / m。

可以使用 indeterminate 属性来设置半选状态。

在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <veui-checkbox
      v-model="checked"
      :ui="size"
      :indeterminate.sync="indeterminate"
    >
      Checked: {{ checked }}
    </veui-checkbox>
  </section>
  <section>
    <veui-checkbox
      v-model="small"
      ui="s"
    >
      Small
    </veui-checkbox>
    <veui-checkbox
      v-model="indeterminate"
      ui="s"
    >
      Indeterminate
    </veui-checkbox>
  </section>
</article>
</template>

<script>
import { Checkbox } from 'veui'

export default {
  components: {
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      checked: false,
      indeterminate: false,
      small: false
    }
  },
  computed: {
    size () {
      return this.small ? 's' : ''
    }
  }
}
</script>

<style lang="less" scoped>
.veui-checkbox {
  & + & {
    margin-left: 20px;
  }
}
</style>

值设定

可以通过设置 true-value 和 false-value 属性 v-model 的值。

State: Not confirmed

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-checkbox
    v-model="status"
    true-value="CONFIRMED"
    false-value="UNCONFIRMED"
  >
    I've read the agreement
  </veui-checkbox>
  <p>State: {{ statusMap[status] }}</p>
</article>
</template>

<script>
import { Checkbox } from 'veui'

const STATUS_MAP = {
  CONFIRMED: 'Confirmed',
  UNCONFIRMED: 'Not confirmed'
}

export default {
  components: {
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      status: 'UNCONFIRMED',
      statusMap: STATUS_MAP
    }
  }
}
</script>

API

属性

名称类型默认值描述
uistring=-

预设样式。

值描述
s小尺寸样式。
m中尺寸样式。
checkedboolean=false

.sync

是否处于选中状态。

value*-当 v-model 绑定到数组时，代表当前复选框的值。
true-value*=true选中状态对应的值。
false-value*=false未选状态对应的值。
indeterminateboolean=false是否处于半选状态。
disabledboolean=false是否为禁用状态。
readonlyboolean=false是否为只读状态。

插槽

名称描述
default复选框的描述文本，点击时会切换选择状态。无默认内容。

事件

名称描述
change用户切换选中状态时触发，回调参数为 (checked: boolean)。checked 表示当前是否选中。
input

v-model

选中状态变化后触发，回调参数为 (val: *)。val 为当前 v-model 的值。与 change 事件不同，input 事件在数据操作导致状态变化时也会触发。

此外，Checkbox 支持如下的原生事件：

auxclick、click、contextmenu、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseover、mouseout、mouseup、select、wheel、keydown、keypress、keyup、focus、blur、focusin、focusout。

回调参数均为相应的原生事件对象。

图标

名称描述
checked已选状态。
indeterminate半选状态。
在 GitHub 上编辑此页编辑