# checkbox

多选框。

# 使用示例

扫码预览

<template>
  <view class="demo-ui-page">
    <view class="demo-title">checkbox 多项选择器</view>
    <demo-cell title="默认样式">
	  <checkbox-group>
        <label class="mr-10">
          <checkbox value="cb" checked="true" />选中
        </label>
        <label class="mr-10">
          <checkbox value="cb" />未选中
        </label>
      </checkbox-group>
    </demo-cell>
    <demo-cell title="不同颜色和尺寸">
      <checkbox-group>
        <label class="mr-10">
          <checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
        </label>
        <label class="mr-10">
          <checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
        </label>
        <label class="mr-10">
          <checkbox value="cb" disabled color="#FFCC33" style="transform:scale(0.7)" />禁用
        </label>
        <label class="mr-10">
          <checkbox value="cb" style="transform:scale(0.7)" />
        </label>
      </checkbox-group>
    </demo-cell>
  </view>
</template>

<script>
	export default {
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

展开刷新关闭

# checkbox-group

多项选择器，内部由多个 checkbox 组成。

属性说明

属性名	类型	默认值	说明
@change	EventHandle		`<checkbox-group>`中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

# checkbox

多选项目。

属性说明

属性名	类型	默认值	说明
value	String		`<checkbox>` 标识，选中时触发 `<checkbox-group>` 的 change 事件，并携带 `<checkbox>` 的 value（v-model）
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color		checkbox的颜色，同css的color

颜色默认蓝色，更改颜色使用 color 属性。
如需调节 checkbox 大小，可通过 css 的 scale 方法调节，如缩小到 70% 则style="transform:scale(0.7)"

← picker-view radio →