# bz-checkbox 单选多选框

# 基本用法

与原生组件 checkbox 和 radio 比，为样式优化, 但不建议与内置表单组件混用，其与内置 form 组件无关联性。

bz-checkbox 使用时需与子组件 bz-checkbox-item 结合使用

扫码预览

<template>
  <view class="demo-ui-page">
    <view class="demo-content">
      <view class="demo-title">bz-checkbox 选择框</view>
      <demo-cell title="默认使用（多选）">
        <bz-checkbox v-model="value">
          <bz-checkbox-item val="v1">选项1</bz-checkbox-item>
          <bz-checkbox-item val="v2">选项2</bz-checkbox-item>
          <bz-checkbox-item val="v3">选项3</bz-checkbox-item>
        </bz-checkbox>
      </demo-cell>
      <demo-cell title="单选/点形">
        <bz-checkbox @onChange="change" isRadio boxType="spot">
          <bz-checkbox-item val="v1">选项1</bz-checkbox-item>
          <bz-checkbox-item val="v2" disabled>选项2</bz-checkbox-item>
          <bz-checkbox-item val="v3">选项3</bz-checkbox-item>
        </bz-checkbox>
      </demo-cell>
      <demo-cell title="单独使用">
        <bz-checkbox-item class="mr-10"></bz-checkbox-item>
        <bz-checkbox-item boxType="spot" color="red"
          >圆点类型-自定义颜色</bz-checkbox-item
        >
        <bz-checkbox-item boxType="round" disabled checked
          >圆形禁用</bz-checkbox-item
        >
      </demo-cell>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: ["v2", "v3"],
    };
  },
  methods: {
    change(val) {
      console.log("---checkbox2", val);
    },
  },
};
</script>

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
42
43
44
45

展开刷新关闭

# 属性说明

# bz-checkbox Props

属性名	类型	默认值	可选值	说明
value/v-model	Array、String	-	-	当前选中的值
isRadio	Boolean	false	-	是否单选
color	String	蓝色	-	主题颜色
boxType	String	'square'	'round'、'square'、'spot'	选择框样式类型
@onChange	Handler	-	-	改变数据触发回调

# bz-checkbox-item Props

属性名	类型	默认值	必填	说明
val	String、Number	-	是	对应 value 值
isRadio	Boolean	false	-	是否单选（单独设置，不传则使用 bz-checkbox）
color	String	蓝色	-	主题颜色（同上）
disabled	Boolean	false	-	是否禁用
checked	Boolean	false	-	是否选中单独使用时生效，与 bz-checkbox 使用时，则使用 bz-checkbox 的 value 值
@change	Handler	-	-	状态改变触发方法

← bz-cascader 级联选择器 bz-datetime-picker 日期选择器 →