勾选（aip-checkbox）
类似 html 的 checkbox 标签，提供多选按钮的部分常规功能，可以更好地和表单结合使用。
示例
<div
aip-state="{
formModel: {
disabled: { value: 'apple'},
radio: {value: ''},
radio1: {value: 'apple'},
radio2: {value: 'apple'},
radio3: {value: 'apple'},
radio4: {value: 'apple'},
},
formModelInit: {
disabled: { value: ''},
radio: {value: ''},
radio1: {value: ''},
radio2: {value: ''},
radio3: {value: ''},
radio4: {value: ''},
},
}"
>
<aip-form
method="POST"
action-xhr="/examples/aip-download.html"
[data]="formModel"
(aip-submit)="console.log('emit aip-submit')"
(aip-reset)="console.log('emit aip-reset')"
(aip-submit-success)="console.log('aip-submit-success:', $event.detail)"
(aip-submit-error)="console.log('aip-submit-error:', $event.detail)"
>
<div class="block">shape=dot 多选按钮，disable 某个选项</div>
<div class="block">
<aip-checkbox
aip-model="formModel.disabled"
value="apple"
label="苹果"
></aip-checkbox>
<aip-checkbox
aip-model="formModel.disabled"
value="orange"
label="橘子"
></aip-checkbox>
<aip-checkbox
aip-model="formModel.disabled"
value="banana"
label="香蕉"
></aip-checkbox>
<aip-checkbox
aip-model="formModel.disabled"
value="watermelon"
label="西瓜"
></aip-checkbox>
</div>
<div class="block">
<span style="color: rgba(255, 2, 1)">*</span>shape=dot 多选按钮，必填
</div>
<div class="block" style="display: flex; justify-content: space-between">
<aip-checkbox
aip-model="formModel.radio"
value="apple"
label="苹果"
required
[disabled]="formModel.disabled.value.includes('apple')"
></aip-checkbox>
<aip-checkbox
aip-model="formModel.radio"
value="orange"
label="橘子"
required
[disabled]="formModel.disabled.value.includes('orange')"
></aip-checkbox>
<aip-checkbox
aip-model="formModel.radio"
value="banana"
label="香蕉"
required
[disabled]="formModel.disabled.value.includes('banana')"
></aip-checkbox>
<aip-checkbox
aip-model="formModel.radio"
value="watermelon"
label="西瓜"
[disabled]="formModel.disabled.value.includes('watermelon')"
required
></aip-checkbox>
</div>
<div class="block block-validate" aip-if="formModel.radio.validationMessage">
默认错误提示：{{formModel.radio.validationMessage}}
</div>
<div
class="block"
style="display: flex; align-items: center; padding-bottom: 20px"
>
<aip-button
width="200"
height="60"
type="submit"
btn_style="margin-right: 10px;border:0;padding:15px;border-radius:20px;"
>submit</aip-button
>
<aip-button
width="200"
height="60"
type="reset"
(click)="formModel=formModelInit"
btn_style="margin-right: 10px;border:0;padding:15px;border-radius:20px;"
>reset</aip-button
>
</div>
</aip-form>
</div>
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
引入
<script
defer
src="https://unpkg.byted-static.com/latest/byted-fangyuan/aip-ui/dist/aip-checkbox/aip-checkbox.iife.js"
></script>
1
2
3
4
2
3
4
支持属性
| 属性名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| value | string | '' | 是 | 多选按钮的值 |
| checked | string | '{value: []}' | 否 | 这是一个对象 stringify 之后的字符串，value 表示多个选中按钮的值形成的数组，还有校验结果也会塞到这个对象里 |
| required | boolean | false | 否 | 多选按钮的必填校验属性，值为 true 时必须填写内容 |
| disabled | boolean | false | 否 | 多选按钮的禁用属性，值为 true 被禁用 |
| label | string | '' | 否 | 多选按钮内部 label 的文案 |
| label-style | string | '' | 否 | 内部 label 文案样式 |
| label-disabled-style | string | '' | 否 | 内部 label 文案样式（禁用状态） |
| checker-style | string | '' | 否 | 外部框框的样式 |
| checker-checked-style | string | '' | 否 | 外部框框的样式（选中状态） |
| icon-size | string | '' | 否 | 内部 icon 的大小 |
校验返回的错误类型
- valueMissing: boolean，输入值是否必填校验
- valid: boolean，所有格式校验是否通过
支持事件
| 事件名称 | 说明 |
|---|---|
| change | 当多选按钮值发生变化 |