基础模式
<template>
<y-checkbox>Checkbox</y-checkbox>
<y-checkbox v-model="value">Checkbox</y-checkbox>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "Base",
setup() {
const value = ref(false);
return {
value
};
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
局部选中态
<template>
<y-checkbox
v-model="checkAll"
:indeterminate="isIndeterminate"
@change="handleCheckAllChange">
Check All
</y-checkbox>
<y-checkbox-group
v-model="checkedCities"
@change="handleCheckedCitiesChange">
<y-checkbox
v-for="city in cityOptions"
:key="city"
:value="city">
{{ city }}
</y-checkbox>
</y-checkbox-group>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
name: "Indeterminate",
setup() {
const state = reactive({
checkAll: false,
checkedCities: ['Shanghai', 'Beijing'],
cityOptions: ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'],
isIndeterminate: true,
});
const handleCheckAllChange = (val) => {
state.checkedCities = val ? state.cityOptions : [];
state.isIndeterminate = false;
};
const handleCheckedCitiesChange = (value) => {
const checkedCount = value.length;
state.checkAll = checkedCount === state.cityOptions.length;
state.isIndeterminate = checkedCount > 0 && checkedCount < state.cityOptions.length;
};
return {
...toRefs(state),
handleCheckAllChange,
handleCheckedCitiesChange,
};
}
});
</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
46
47
48
49
50
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
禁用态
<template>
<y-checkbox disabled>Checkbox</y-checkbox>
<y-checkbox v-model="value" disabled>Checkbox</y-checkbox>
<y-checkbox-group v-model="groupValue" disabled>
<y-checkbox
v-for="option in options"
:key="option.value"
:disabled="option.disabled"
:value="option.value">
{{option.label}}
</y-checkbox>
</y-checkbox-group>
<y-checkbox-group v-model="groupValue">
<y-checkbox
v-for="option in options"
:key="option.value"
:disabled="option.disabled"
:value="option.value">
{{option.label}}
</y-checkbox>
</y-checkbox-group>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
name: "Disabled",
setup() {
const state = reactive({
value: true,
groupValue: [],
options: [
{value: 'a', label: 'Option A'},
{value: 'b', label: 'Option B', disabled: true},
{value: 'c', label: 'Option C'},
{value: 'd', label: 'Option D'},
],
});
return {
...toRefs(state),
};
}
});
</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
46
47
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
分组
[]
<template>
<div>{{value}}</div>
<y-radio-group v-model="type" type="outline">
<y-radio :value="null">Default</y-radio>
<y-radio value="solid">Solid</y-radio>
<y-radio value="outline">Outline</y-radio>
</y-radio-group>
<y-checkbox v-model="disabled">Disabled</y-checkbox>
<y-checkbox-group v-model="value" :type="type" :disabled="disabled">
<y-checkbox
v-for="option in options"
:key="option.value"
:value="option.value">
{{option.label}}
</y-checkbox>
</y-checkbox-group>
<y-checkbox-group v-model="value" vertical :disabled="disabled">
<y-checkbox
v-for="option in options"
:key="option.value"
:value="option.value">
{{option.label}}
</y-checkbox>
</y-checkbox-group>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
name: "Group",
setup() {
const state = reactive({
value: [],
type: null,
disabled: false,
options: [
{value: 'a', label: 'Option A'},
{value: 'b', label: 'Option B'},
{value: 'c', label: 'Option C'},
{value: 'd', label: 'Option D'},
],
});
return {
...toRefs(state),
};
}
});
</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
46
47
48
49
50
51
52
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
不同尺寸
<template>
<y-radio-group v-model="type" type="outline">
<y-radio value="solid">Solid</y-radio>
<y-radio value="outline">Outline</y-radio>
</y-radio-group>
<y-checkbox-group v-model="value" :type="type" size="large">
<y-checkbox
v-for="option in options"
:key="option.value"
:value="option.value">
{{option.label}}
</y-checkbox>
</y-checkbox-group>
<y-checkbox-group v-model="value" :type="type" size="normal">
<y-checkbox
v-for="option in options"
:key="option.value"
:value="option.value">
{{option.label}}
</y-checkbox>
</y-checkbox-group>
<y-checkbox-group v-model="value" :type="type" size="small">
<y-checkbox
v-for="option in options"
:key="option.value"
:value="option.value">
{{option.label}}
</y-checkbox>
</y-checkbox-group>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
name: "Group",
setup() {
const state = reactive({
type: 'solid',
disabled: false,
value: ['a'],
options: [
{value: 'a', label: 'Option A'},
{value: 'b', label: 'Option B'},
{value: 'c', label: 'Option C'},
{value: 'd', label: 'Option D'},
],
});
return {
...toRefs(state),
};
}
});
</script>
<style lang="scss" scoped>
.yoga-radio-group {
margin-bottom: 12px;
}
</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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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
固定宽度
<template>
<y-checkbox v-model="useFixed">Fixed Width 150PX</y-checkbox>
<y-checkbox-group v-model="value" :fixed-width="fixedWidth">
<y-checkbox
v-for="option in options"
:key="option.value"
:value="option.value">
{{option.label}}
</y-checkbox>
</y-checkbox-group>
</template>
<script>
import { defineComponent, reactive, computed, toRefs } from "vue";
export default defineComponent({
name: "Group",
setup() {
const state = reactive({
useFixed: true,
value: [],
options: [
{value: 'a', label: 'Long Long Long Long Option A'},
{value: 'b', label: 'Option Long B'},
{value: 'c', label: 'Option Long Long C'},
{value: 'd', label: 'Option Long Long D'},
],
});
const fixedWidth = computed(() => state.useFixed ? 150 : undefined);
return {
fixedWidth,
...toRefs(state),
};
}
});
</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
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
API
Checkbox props
| Property | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| modelValue | the v-model bind value of checkbox | String, Number, Boolean | - | null |
| value | the native value of checkbox; only works on checkbox group | String, Number, Boolean | - | - |
| name | the native name of checkbox | String | - | - |
| disabled | whether the checkbox is disabled | Boolean | - | false |
| indeterminate | same as indeterminate in native checkbox | Boolean | - | false |
Checkbox events
| Event | Description | Parameters |
|---|---|---|
| change | trigger when the value change | the value |
| update:modelValue | trigger when the value change | the value |
CheckboxGroup props
| Property | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| modelValue | the v-model bind value of checkbox group | Array | - | [] |
| vertical | whether use vertical layout of checkbox group | Boolean | true/false | false |
| type | the type of checkbox | String | outline/ solid | default |
| size | the size of checkbox button | String | large/normal/small | normal |
| disabled | whether the checkbox group is disabled | Boolean | - | false |
| fixed-width | fix checkbox item label width | Number | - | - |
CheckboxGroup events
| Event | Description | Parameters |
|---|---|---|
| change | trigger when the value change | the value |
| update:modelValue | trigger when the value change | the value |