Checkbox 多选

一、概述

定义

对于同一组选项，可以选择多个选项的组件

使用场景

• 在一组可选项中进行多项选择时；

• 单独使用时可以表示两种状态之间的切换

类型

• 基础样式

• 多选组

• 全选

二、基础样式

勾选用于表示用户同意描述或用户协议。如 USB 连接界面的“不再提示”;

交互说明：

1.处于勾选状态，代表已被选择

<div>
  默认：
  <se-checkbox value="选项">选项</se-checkbox>
</div>
<br />
<div>
  选中：
  <se-checkbox value="选项" checked>选项</se-checkbox>
</div>
<br />
<div>
  禁用状态：
  <se-checkbox value="a" disabled>选项A</se-checkbox>
  <se-checkbox value="b" checked disabled>选项B</se-checkbox>
</div>

三、多选组

在多个选项中，可进行多选操作。

交互说明：

1.整个列表区域点击可被选中/取消选中

<se-checkbox-group :value="selected" @change="handleChange">
  <se-checkbox v-for="(item, i) in options" :key="i" :value="item.value" :disabled="item.disabled">
    {{ item.label }}
  </se-checkbox>
</se-checkbox-group>

<p>Selected: {{ selected || 'none' }}</p>

<script>
  export default {
    data() {
      return {
        selected: ['b', 'c'],
        options: [
          { label: '选项A', value: 'a' },
          { label: '选项B', value: 'b' },
          { label: '选项C', value: 'c' },
          { label: '选项D', value: 'd' }
        ]
      }
    },
    methods: {
      handleChange(e) {
        this.selected = e.detail.value
      }
    }
  }
</script>

当然你也可以直接传入一个 options 数组，并在 options 中配置规则 ——

<se-checkbox-group :value="selected" :options="options" @change="handleChange" />

<p>Selected: {{ selected || 'none' }}</p>

<script>
  export default {
    data() {
      return {
        selected: ['b', 'c'],
        options: [
          { label: '选项A', value: 'a', disabled: true, checked: true },
          { label: '选项B', value: 'b' },
          { label: '选项C', value: 'c' },
          { label: '选项D', value: 'd' }
        ]
      }
    },
    methods: {
      handleChange(e) {
        this.selected = e.detail.value
      }
    }
  }
</script>

禁用状态效果展示如下 ——

<se-checkbox-group :value="selected" :options="options" disabled />
<p>Selected: {{ selected || 'none' }}</p>

<script>
  export default {
    data() {
      return {
        selected: ['a', 'c'],
        options: [
          { label: '选项A', value: 'a' },
          { label: '选项B', value: 'b' },
          { label: '选项C', value: 'c' },
          { label: '选项D', value: 'd' }
        ]
      }
    }
  }
</script>

四、全选

用户可通过全选，对一组多选框进行批量选择

交互说明：

1.全选框和其他多选框具有联动关系。

2.当选项未全选时，用半选表示当前的状态。

<div style="width: 350px; padding-bottom: 5px;border-bottom: 1px solid rgb(233, 233, 233);">
  <se-checkbox :checked="allChecked" :indeterminate="indeterminate" @change="onCheckAllChange">
    全部选中
  </se-checkbox>
</div>
<br />
<se-checkbox-group :value="selected" :options="options" @change="onCheckedResultChange" />
<p>Selected {{ selected }}</p>

<script>
  export default {
    data() {
      return {
        options: [
          { label: '选项A', value: 'a' },
          { label: '选项B', value: 'b' },
          { label: '选项C', value: 'c' },
          { label: '选项D', value: 'd' }
        ],
        selected: ['c'],
        allChecked: false
      }
    },
    computed: {
      indeterminate() {
        const total = this.options.length
        const checked = this.selected.length
        return 0 < checked && checked < total
      }
    },
    methods: {
      onCheckAllChange(e) {
        this.allChecked = e.detail.checked
        this.selected = !e.detail.checked
          ? []
          : this.options.map(item => {
              return item.value
            })
      },
      onCheckedResultChange(e) {
        console.log(e.detail) // => detail: { value: [] }}
        this.selected = e.detail.value
        const total = this.options.length
        this.allChecked = e.detail.value.length === total
      }
    }
  }
</script>

上述例子使用到了 indeterminate 属性，通常用于展示一组未全部被选中（部分选中）的多选框组状态。

Checkbox Props

Checkbox Events

CheckboxGroup Props

Options 签名如下 ——

Array<{
  label: string,
  value: string,
  disabled?: boolean,
  checked?: boolean
}>

CheckboxGroup Events