Checkbox 多选框

用于在选中和未选中状态之间切换的多选框组件，支持分组使用。

名称	分类	说明	类型	默认值
`type`	风格	预设主题颜色类型	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	—
`type`	风格	所有子复选框的预设主题颜色	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	—
`size`	尺寸	尺寸	`'large' \| 'small'`	—
`size`	尺寸	所有子复选框的尺寸	`'large' \| 'small'`	—
`color`	颜色	自定义十六进制颜色	`string`	—
`color`	颜色	所有子复选框的自定义十六进制颜色	`string`	—
`disabled`	状态	是否禁用	`boolean`	`false`
`indeterminate`	状态	是否为不确定状态（半选）	`boolean`	`false`
`disabled`	状态	是否禁用所有子复选框	`boolean`	`false`
`name`	行为	原生 name 属性	`string`	—
`min`	行为	最少选中数量	`number`	—
`max`	行为	最多选中数量	`number`	—
`model-value / v-model`	内容	绑定值（独立使用时）	`boolean`	`false`
`value`	内容	在 CheckboxGroup 中使用时的标识值	`string \| number \| boolean`	—
`label`	内容	标签文本	`string`	—
`model-value / v-model`	内容	绑定值	`Array<string \| number \| boolean>`	`[]`
`change`	事件	状态改变时触发	`(value: boolean) => void`	—
`change`	事件	选中值改变时触发	`(value: CheckboxValueType[]) => void`	—
`default`	插槽	自定义标签内容		—
`default`	插槽	子复选框内容		—
`focus`	暴露	使复选框获取焦点	`() => void`	—
`checked`	暴露	是否选中	`ComputedRef<boolean>`	—

基础用法

绑定 v-model 到一个 Boolean 类型的变量。

<template>
  <div class="demo-checkbox">
    <px-checkbox v-model="value1" label="Option A" />
    <px-checkbox v-model="value2" label="Option B" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(true);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

禁用状态

使用 disabled 属性来禁用多选框。

<template>
  <div class="demo-checkbox">
    <px-checkbox v-model="value1" label="Disabled unchecked" disabled />
    <px-checkbox v-model="value2" label="Disabled checked" disabled />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(true);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

类型

使用 type 属性来应用预设主题颜色。

<template>
  <div class="demo-checkbox">
    <px-checkbox v-model="v1" label="Primary" type="primary" />
    <px-checkbox v-model="v2" label="Success" type="success" />
    <px-checkbox v-model="v3" label="Warning" type="warning" />
    <px-checkbox v-model="v4" label="Danger" type="danger" />
    <px-checkbox v-model="v5" label="Info" type="info" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const v1 = ref(true);
const v2 = ref(true);
const v3 = ref(true);
const v4 = ref(true);
const v5 = ref(true);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
</style>

自定义颜色

使用 color 属性来设置选中状态的自定义十六进制颜色。

<template>
  <div class="demo-checkbox">
    <px-checkbox v-model="v1" label="Coral" color="#ff6b6b" />
    <px-checkbox v-model="v2" label="Teal" color="#20c997" />
    <px-checkbox v-model="v3" label="Purple" color="#845ef7" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const v1 = ref(true);
const v2 = ref(true);
const v3 = ref(true);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

不同尺寸

使用 size 属性来设置多选框的大小。

<template>
  <div class="demo-checkbox">
    <px-checkbox v-model="v1" label="Small" size="small" />
    <px-checkbox v-model="v2" label="Default" />
    <px-checkbox v-model="v3" label="Large" size="large" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const v1 = ref(true);
const v2 = ref(true);
const v3 = ref(true);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

多选框组

使用 PxCheckboxGroup 来通过单个 v-model 数组管理多个多选框。

<template>
  <div class="demo-checkbox">
    <px-checkbox-group v-model="selected">
      <px-checkbox value="apple" label="Apple" />
      <px-checkbox value="banana" label="Banana" />
      <px-checkbox value="cherry" label="Cherry" />
      <px-checkbox value="durian" label="Durian" />
    </px-checkbox-group>
    <p class="demo-checkbox__result">Selected: {{ selected }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const selected = ref(['apple', 'cherry']);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.demo-checkbox__result {
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-secondary);
}
</style>

不确定状态

使用 indeterminate 属性来设置半选状态。通常用于"全选"模式。

<template>
  <div class="demo-checkbox">
    <px-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      label="Select All"
      @change="handleCheckAllChange"
    />
    <px-checkbox-group v-model="checkedItems" @change="handleGroupChange">
      <px-checkbox value="a" label="Option A" />
      <px-checkbox value="b" label="Option B" />
      <px-checkbox value="c" label="Option C" />
    </px-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const allOptions = ['a', 'b', 'c'];
const checkedItems = ref(['a']);
const checkAll = ref(false);
const isIndeterminate = ref(true);

function handleCheckAllChange(val: boolean) {
  checkedItems.value = val ? [...allOptions] : [];
  isIndeterminate.value = false;
}

function handleGroupChange(val: (string | number | boolean)[]) {
  const count = val.length;
  checkAll.value = count === allOptions.length;
  isIndeterminate.value = count > 0 && count < allOptions.length;
}
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

分组最小/最大限制

在分组上使用 min 和 max 属性来约束选中项的数量。

<template>
  <div class="demo-checkbox">
    <p class="demo-checkbox__tip">Min: 1, Max: 3</p>
    <px-checkbox-group v-model="selected" :min="1" :max="3">
      <px-checkbox value="a" label="Option A" />
      <px-checkbox value="b" label="Option B" />
      <px-checkbox value="c" label="Option C" />
      <px-checkbox value="d" label="Option D" />
      <px-checkbox value="e" label="Option E" />
    </px-checkbox-group>
    <p class="demo-checkbox__result">Selected: {{ selected }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const selected = ref(['a', 'b']);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.demo-checkbox__tip {
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-secondary);
}
.demo-checkbox__result {
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-secondary);
}
</style>

Checkbox 多选框 ​

基础用法 ​

禁用状态 ​

类型 ​

自定义颜色 ​

不同尺寸 ​

多选框组 ​

不确定状态 ​

分组最小/最大限制 ​