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)