Mind UI Vue

# CheckBox 多选框

# 介绍

一组备选项中进行多选。

# 引入

import { CheckboxGroup, Checkbox } from 'mind-ui-vue';
Vue.use(CheckboxGroup);
Vue.use(Checkbox);

# 示例

# 基础用法

<m-checkbox v-model="checkbox" @change="onChange">复选框</m-checkbox>

# 圆形

<m-checkbox v-model="checkbox" round>复选框</m-checkbox>

# 自定义颜色

<m-checkbox v-model="checkbox" checked-color="red">复选框</m-checkbox>

# 禁用状态

<m-checkbox v-model="checkbox" disabled>复选框</m-checkbox>

# label 居左

<m-checkbox label-left v-model="checkbox">复选框</m-checkbox>

# 多选框组

<m-checkbox-group v-model="checkList">
  <m-checkbox name="a">复选框a</m-checkbox>
  <m-checkbox name="b">复选框b</m-checkbox>
  <m-checkbox name="c">复选框c</m-checkbox>
  <m-checkbox name="d">复选框d</m-checkbox>
</m-checkbox-group>

export default {
  data () {
    return {
      checkList: ['a','b']
    }
  }
}

# 限制选择个数

使用 min 和 max 属性能够限制可以被勾选的项目的数量。

<m-checkbox-group v-model="checkList" :min="1" :max="2">
  <m-checkbox name="a">复选框a</m-checkbox>
  <m-checkbox name="b">复选框b</m-checkbox>
  <m-checkbox name="c">复选框c</m-checkbox>
  <m-checkbox name="d">复选框d</m-checkbox>
</m-checkbox-group>

export default {
  data () {
    return {
      checkList: ['a','b']
    }
  }
}

# Api

# CheckboxGroup Props

参数 说明 类型 可选值 默认值
v-model 选中项 name 集合 Array — []
name 在表单内提交时的标识符 String — —
min 最少选中数量 Number — 0
max 最多选中数量 Number — -
disabled 是否禁用 Boolean — false
label-left 文字在左边 Boolean — false
checked-color 选中状态颜色 String — —
round 是否圆形 Boolean — false

# CheckboxGroup Events

方法名称 说明 值
change 选中值变更时触发回调 event.detail 当前选中项 name

# Checkbox Props

参数 说明 类型 可选值 默认值
v-model 是否选中 Boolean — false
name 在表单内提交时的标识符 String — —
disabled 是否禁用 Boolean — false
label-left 文字在左边 Boolean — false
checked-color 选中状态颜色，优先级高于 group String — —
round 是否圆形 Boolean — false

# Checkbox Events

方法名称 说明 值
change 选中值变更时触发回调 event.detail 当前 checked 状态值

# Checkbox Slots

名称 说明
— label 内容

← Rate 评分 →