# Checkbox 多选框

请扫码查看示例

# 介绍

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

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-checkbox" src="@/node_modules/mui-minix/src/checkbox/index"></element>
<div>
  <m-checkbox value="{{value}}" text="多选一" @m-change="onChange"></m-checkbox>
  <m-checkbox class="m-t-10" value="{{value1}}" text="多选二" @m-change="onChange1"></m-checkbox>
</div>

1
2
3
4
5

export default {
  data(){
    return {
      value: false,
      value1: false
    }
  },
  onChange(e){
    this.value = e.detail
  },
  onChnage1(2){
    this.value1 = e.detail
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.m-t-10{
  margin-top:10px;
}

1
2
3

# 禁用状态

通过设置 disabled 属性，可以控制是否禁用。默认为 false

<element name="m-checkbox" src="@/node_modules/mui-minix/src/checkbox/index"></element>
<div>
  <m-checkbox disabled="{{true}}" value="{{value}}" text="多选一" @m-change="onChange"></m-checkbox>
  <m-checkbox disabled="{{true}}" class="m-t-10" value="{{value1}}" text="多选二" @m-change="onChange1"></m-checkbox>
</div>

1
2
3
4
5

export default {
  data(){
    return {
      value: false,
      value1: false
    }
  },
  onChange(e){
    this.value = e.detail
  },
  onChnage1(2){
    this.value1 = e.detail
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.m-t-10{
  margin-top:10px;
}

1
2
3

# 主题颜色

通过设置 theme 属性，可以控制主题颜色。默认为 brand

<element name="m-checkbox" src="@/node_modules/mui-minix/src/checkbox/index"></element>
<div>
  <m-checkbox theme="orange-red" value="{{value}}" text="多选一" @m-change="onChange"></m-checkbox>
  <m-checkbox theme="cyan" class="m-t-10" value="{{value1}}" text="多选二" @m-change="onChange1"></m-checkbox>
</div>

1
2
3
4
5

export default {
  data(){
    return {
      value: false,
      value1: false
    }
  },
  onChange(e){
    this.value = e.detail
  },
  onChnage1(2){
    this.value1 = e.detail
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.m-t-10{
  margin-top:10px;
}

1
2
3

# Api

# Prop

字段	说明	类型	默认值	是否必须
`value`	当前值	`boolean`	`false`	`是`
`theme`	主题。可选值参考 `m-button`	`string`	`brand`	`否`
`color`	自定义颜色	`string`	`-`	`否`
`text-color`	文本颜色	`string`	`#000000`	`否`
`text-size`	文本尺寸	`string`	`-`	`否`
`disabled`	禁用	`boolean`	`false`	`否`

# Events

名称	说明	回调参数
`m-change`	点击时触发	`value: boolean`