Checkbox 复选框
基本使用
<pk-checkbox-group>
<pk-checkbox>复选框1</pk-checkbox>
<pk-checkbox>复选框2</pk-checkbox>
</pk-checkbox-group>
代码示例
基础用法
创建复选框组。
template
<pk-checkbox-group>
<pk-checkbox>复选框1</pk-checkbox>
<pk-checkbox>复选框2</pk-checkbox>
</pk-checkbox-group>
script
import { PkCheckbox, PkCheckboxGroup, PkDivider } from '@pumpkin-ui/mobile'
style
方形
可通过设置square属性为true设置为方形。通过设置CheckboxGroup的square属性可改变子组件中Checkbox的形状。如果子组件单独设置了square属性或者group为false则以子组件的为准。
template
<pk-checkbox-group square>
<pk-checkbox>方形</pk-checkbox>
<pk-checkbox>方形</pk-checkbox>
<pk-checkbox>方形</pk-checkbox>
<pk-checkbox :square="false">默认</pk-checkbox>
</pk-checkbox-group>
script
import { PkCheckbox, PkCheckboxGroup, PkDivider } from '@pumpkin-ui/mobile'
style
禁用
可通过设置disabled属性为true设置为禁用。通过设置CheckboxGroup的disabled属性可设置子组件中Checkbox的禁用状态。如果子组件单独设置了disabled属性或者设置group为false则以子组件的为准。
template
<pk-checkbox-group disabled>
<pk-checkbox>方形</pk-checkbox>
<pk-checkbox>方形</pk-checkbox>
<pk-checkbox>方形</pk-checkbox>
<pk-checkbox :disabled="false">默认</pk-checkbox>
</pk-checkbox-group>
script
import { PkCheckbox, PkCheckboxGroup, PkDivider } from '@pumpkin-ui/mobile'
style
大小
可通过设置size属性设置为大小。通过设置CheckboxGroup的size属性可设置子组件的中size。如果子组件单独设置了size属性或者设置group为false则以子组件的为准。
template
<pk-checkbox-group :size="30">
<pk-checkbox>大小30</pk-checkbox>
<pk-checkbox>大小30</pk-checkbox>
<pk-checkbox>大小30</pk-checkbox>
<pk-checkbox :size="20">大小20</pk-checkbox>
</pk-checkbox-group>
script
import { PkCheckbox, PkCheckboxGroup, PkDivider } from '@pumpkin-ui/mobile'
style
最多选中
可通过设置CheckboxGroup的max属性设置最多选中的数量。
template
<pk-checkbox-group :max="2">
<pk-checkbox>选项一</pk-checkbox>
<pk-checkbox>选项二</pk-checkbox>
<pk-checkbox>选项三</pk-checkbox>
<pk-checkbox>选项四</pk-checkbox>
</pk-checkbox-group>
script
import { PkCheckbox, PkCheckboxGroup, PkDivider } from '@pumpkin-ui/mobile'
style
纵向排列
可通过设置CheckboxGroup的vertical为true实现。
template
<pk-checkbox-group vertical>
<pk-checkbox>选项一</pk-checkbox>
<pk-checkbox>选项二</pk-checkbox>
<pk-checkbox>选项三</pk-checkbox>
<pk-checkbox>选项四</pk-checkbox>
</pk-checkbox-group>
script
import { PkCheckbox, PkCheckboxGroup, PkDivider } from '@pumpkin-ui/mobile'
style
默认值
可通过设置Checkbox的v-model为true实现。
template
<pk-checkbox-group>
<pk-checkbox v-model="firstChecked">选项一</pk-checkbox>
<pk-checkbox>选项二</pk-checkbox>
<pk-checkbox>选项三</pk-checkbox>
<pk-checkbox>选项四</pk-checkbox>
</pk-checkbox-group>
script
import { PkCheckbox, PkCheckboxGroup, PkDivider } from '@pumpkin-ui/mobile'
import { ref } from 'vue';
const firstChecked = ref(true)
style
事件
template
<pk-checkbox-group @on-change="onChange" @on-limit="onLimit" :max="2">
<pk-checkbox label="选项一" :value="1" v-model="firstChecked">选项一</pk-checkbox>
<pk-checkbox label="选项二" :value="2">选项二</pk-checkbox>
<pk-checkbox label="选项三" :value="3">选项三</pk-checkbox>
<pk-checkbox label="选项四" :value="4">选项四</pk-checkbox>
</pk-checkbox-group>
script
import { PkCheckbox, PkCheckboxGroup, PkDivider } from '@pumpkin-ui/mobile'
import { ref } from 'vue'
const firstChecked = ref(true)
const onChange = (value) => {
Toast.show(JSON.stringify(value))
}
const onLimit = (value) => {
Toast.show('最多只能选择两个')
}
style
API
Props
CheckboxGroup Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| size | 复选框的大小,单位为px | number | ||
| square | 方形复选框 | boolean | false | |
| disabled | 禁用状态 | boolean | false | |
| max | 最多选择的项数 | number | ||
| vertical | 纵向排列 | boolean | false |
Checkbox Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| v-model | 复选框选中状态 | boolean | false | |
| size | 复选框大小，单位为px | number | ||
| label | 复选框的文字 | string | ||
| square | 方形复选框 | boolean | false | |
| value | 复选框的值(类似于input的value) | string｜ boolean ｜number | ||
| disabled | 禁用状态 | boolean | false | |
| group | 是否加入父级CheckGroup | boolean | true |
Events
CheckboxGroup Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| onChange | 值变化时触发 | (value: ICheckboxValue[]) => void |
| onLimit | 达到max时，仍然选择未选中的复选框时触发 | (value: ICheckboxValue[]) => void |
Checkbox Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| onChange | 值变化时触发 | (checked: boolean, value: ICheckboxValue)=>void |
| click | 选项被点击时触发 | (e: MouseEvent) => void |
ICheckboxValue
| 属性名 | 说明 | 类型 |
|---|---|---|
| checked | 是否选中 | boolean |
| value | 复选框的值 | boolean｜string｜number |
| label | 复选框的文字 | string |
Slot
CheckboxGroup Slot
| 插槽名 | 说明 |
|---|---|
| default | 默认插槽 |
Checkbox Slot
| 插槽名 | 说明 | 作用域 |
|---|---|---|
| icon | 复选框图标插槽 | checked:boolean |
| label | 复选框文字插槽 |
自定义图标
template
<pk-checkbox-group>
<pk-checkbox-group>
<pk-checkbox label="选项一" :value="1">
<template #icon>
<pk-icon name="alert-outlined" />
</template>
</pk-checkbox>
</pk-checkbox-group>
</pk-checkbox-group>
script
import { PkCheckbox, PkCheckboxGroup, PkIcon } from '@pumpkin-ui/mobile'
style
Exposes
CheckboxGroup Exposes
| 名称 | 说明 | 类型说明 |
|---|---|---|
| getValues | 获取所有子项的值 | ()=>ICheckboxValue[] |
| toggleAll | 切换复选框的选中状态，不传options则反选，传boolean则将所有子项切换为对应的选中状态 | (options?: ICheckboxGroupToggleAll ｜ boolean)=>void |
ICheckboxGroupToggleAll
| 属性名 | 说明 | 类型 | 必选 |
|---|---|---|---|
| skipDisabled | 跳过禁用的值 | boolean | 否 |
| checked | 是否选中，不传则反选 | boolean | 否 |
CheckboxGroup 样式变量
| 名称 | 默认值 | 说明 |
|---|
Checkbox 样式变量
| 名称 | 默认值 | 说明 |
|---|---|---|
| --pk-checkbox-size | 20px | |
| --pk-checkbox-border-color | var(--pk-border-color) | |
| --pk-checkbox-active-background | var(--pk-primary-color) | |
| --pk-checkbox-active-color | #ffffff | |
| --pk-checkbox-label-color | var(--pk-text-color) | |
| --pk-checkbox-label-font-size | var(--pk-font-size-s) | |
| --pk-checkbox-margin | var(--pk-margin-m) | |
| --pk-checkbox-icon-weight | 600 | |
| --pk-checkbox-disabled-opacity | var(--pk-disabled-opacity) |