CheckBox 复选框

介绍

复选框用于选择一个或多个选项。

导入

import CheckBox from '@/components/form/CheckBox.vue'
import CheckBoxGroup from '@/components/form/CheckBoxGroup.vue'

用法

单独使用

复选框可以单独使用，通过 v-model 绑定选中状态。

vue

<template>
  <FlexCol :padding="10">
    <CheckBox v-model="value" text="复选框" />
  </FlexCol>
</template>

<script setup>
import { ref } from 'vue';
import CheckBox from '@/components/form/CheckBox.vue';
import FlexCol from '@/components/layout/FlexCol.vue';

const value = ref(false);
</script>

基础用法

通过 CheckBoxGroup 组件可以管理一组复选框，实现多选功能。

vue

<template>
  <FlexCol :padding="10" justify="flex-start">
    <CheckBoxGroup v-model="value">
      <CheckBox name="0" text="复选框 1" :innerStyle="radioStyle" />
      <CheckBox name="1" text="复选框 2" :innerStyle="radioStyle" />
      <CheckBox name="2" text="复选框 3" :innerStyle="radioStyle" />
      <CheckBox name="3" text="复选框 4" :innerStyle="radioStyle" />
    </CheckBoxGroup>
  </FlexCol>
</template>

<script setup>
import { ref } from 'vue';
import CheckBox from '@/components/form/CheckBox.vue';
import CheckBoxGroup from '@/components/form/CheckBoxGroup.vue';
import FlexCol from '@/components/layout/FlexCol.vue';

const value = ref([]);
const radioStyle = {
  padding: '10rpx 0',
}
</script>

禁用状态

通过 disabled 属性可以禁用复选框。

vue

<template>
  <FlexCol :padding="10">
    <CheckBoxGroup v-model="value">
      <CheckBox name="0" disabled color="danger" text="复选框 1" :innerStyle="radioStyle" />
      <CheckBox name="1" disabled color="success" text="复选框 2" :innerStyle="radioStyle" />
    </CheckBoxGroup>
  </FlexCol>
</template>

<script setup>
import { ref } from 'vue';
import CheckBox from '@/components/form/CheckBox.vue';
import CheckBoxGroup from '@/components/form/CheckBoxGroup.vue';
import FlexCol from '@/components/layout/FlexCol.vue';

const value = ref(['1']);
const radioStyle = {
  padding: '10rpx 0',
}
</script>

自定义形状

支持 square（方形）和 round（圆形）两种形状。

vue

<template>
  <FlexCol :padding="10">
    <CheckBoxGroup v-model="value">
      <CheckBox name="0" shape="round" text="复选框 1" :innerStyle="radioStyle" />
      <CheckBox name="1" shape="square" text="复选框 2" :innerStyle="radioStyle" />
    </CheckBoxGroup>
  </FlexCol>
</template>

<script setup>
import { ref } from 'vue';
import CheckBox from '@/components/form/CheckBox.vue';
import CheckBoxGroup from '@/components/form/CheckBoxGroup.vue';
import FlexCol from '@/components/layout/FlexCol.vue';

const value = ref(['1']);
const radioStyle = {
  padding: '10rpx 0',
}
</script>

自定义颜色

通过 color 属性可以自定义复选框的颜色。

vue

<template>
  <FlexCol :padding="10">
    <CheckBoxGroup v-model="value">
      <CheckBox name="0" color="danger" text="复选框 1" :innerStyle="radioStyle" />
      <CheckBox name="1" color="success" text="复选框 2" :innerStyle="radioStyle" />
    </CheckBoxGroup>
  </FlexCol>
</template>

<script setup>
import { ref } from 'vue';
import CheckBox from '@/components/form/CheckBox.vue';
import CheckBoxGroup from '@/components/form/CheckBoxGroup.vue';
import FlexCol from '@/components/layout/FlexCol.vue';

const value = ref([]);
const radioStyle = {
  padding: '10rpx 0',
}
</script>

配合单元格组件使用

复选框可以与 Cell 组件结合使用，创建列表选择项。

vue

<template>
  <CheckBoxGroup v-model="value">
    <Cell key="1"><CheckBox checkPosition="right" block name="1" text="复选框 1" /></Cell>
    <Cell key="2"><CheckBox checkPosition="right" block name="2" text="复选框 2" /></Cell>
    <Cell key="3"><CheckBox checkPosition="right" block name="3" text="复选框 3" /></Cell>
    <Cell key="4"><CheckBox checkPosition="right" block name="4" text="复选框 4" /></Cell>
  </CheckBoxGroup>
</template>

<script setup>
import { ref } from 'vue';
import CheckBox from '@/components/form/CheckBox.vue';
import CheckBoxGroup from '@/components/form/CheckBoxGroup.vue';
import Cell from '@/components/basic/Cell.vue';

const value = ref([]);
</script>

切换选择

CheckBoxGroup 组件提供了 toggleAll 方法，用于实现全选、全不选和反选功能。

vue

<template>
  <FlexCol :padding="10">
    <CheckBoxGroup v-model="value" ref="checkBoxGroup">
      <CheckBox name="0" text="复选框 1" :innerStyle="radioStyle" />
      <CheckBox name="1" text="复选框 2" :innerStyle="radioStyle" />
      <CheckBox name="2" text="复选框 3" :innerStyle="radioStyle" />
      <CheckBox name="3" text="复选框 4" :innerStyle="radioStyle" />
    </CheckBoxGroup>
    <FlexRow :padding="10" :gap="10">
      <Button type="primary" @click="checkBoxGroup?.toggleAll(true)" text="全选"></Button>
      <Button type="primary" @click="checkBoxGroup?.toggleAll(false)" text="全不选"></Button>
      <Button type="primary" @click="checkBoxGroup?.toggleAll()" text="反选"></Button>
    </FlexRow>
  </FlexCol>
</template>

<script setup>
import { ref } from 'vue';
import CheckBox from '@/components/form/CheckBox.vue';
import CheckBoxGroup, { type CheckBoxGroupInterface } from '@/components/form/CheckBoxGroup.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Button from '@/components/basic/Button.vue';

const value = ref([ '2', '3' ]);
const checkBoxGroup = ref<CheckBoxGroupInterface>();
const radioStyle = {
  padding: '10rpx 0',
}
</script>

API 参考

CheckBox

复选框组件。

Props

名称	说明	类型	必填	默认值
modelValue	是否选中复选框	`boolean`	-	`false`
name	当前复选框在复选框组中的value	`string`	-	-
text	复选框的文字	`string`	-	-
shape	复选框的形状	`"square"\|"round"`	-	`'square'`
block	复选框占满整个父元素	`boolean`	-	`false`
checkPosition	复选框按钮位置，默认在左	`"left"\|"right"`	-	`'left'`
borderColor	复选框未选择时的边框颜色	`string`	-	`'border.input'`
checkColor	复选框选中时勾的颜色	`string`	-	`'white'`
checkSize	复选框按钮大小	`number`	-	`36`
activeOpacity	按下时透明度	`number`	-	`0.75`
color	复选框的颜色	`string`	-	`'primary'`
disabled	是否禁用复选框	`boolean`	-	`false`
icon	选择勾的图标	`string`	-	`'check-mark'`
textColor	文字颜色	`string`	-	`'text.content'`
disabledTextColor	禁用状态下文字颜色	`string`	-	`'text.second'`
textStyle	自定义文字样式	`TextStyle`	-	-
innerStyle	自定义样式	`ViewStyle`	-	-

Events

名称	说明	参数
update:modelValue	选中状态变化事件	`boolean`

Slots

名称	说明
default	复选框的文字内容
check	自定义复选框按钮

CheckBoxGroup

复选框组组件，用于管理一组复选框。

Props

名称	说明	类型	必填	默认值
modelValue	当前复选框组选中的项目	`string[]`	-	`[]`
disabled	是否禁用整组复选框	`boolean`	-	`false`
multiple	是否支持多选	`boolean`	-	`true`

Events

名称	说明	参数
update:modelValue	选中值变化事件	`string[]`

Slots

名称	说明
default	包含的复选框组件

Methods

名称	说明	参数
toggleAll	切换所有复选框	`options?: boolean \| CheckBoxGroupToggleOptions`

主题变量

名称	类型	默认值	说明
CheckBoxShape	string	`'square'`	复选框默认形状
CheckBoxCheckPosition	string	`'left'`	复选框默认位置
CheckBoxBorderColor	string	`'border.input'`	复选框未选择时的边框颜色
CheckBoxCheckColor	string	`'white'`	复选框选中时勾的颜色
CheckBoxTextColor	string	`'text.content'`	复选框文字颜色
CheckBoxDisabledTextColor	string	`'text.second'`	复选框禁用状态下文字颜色
CheckBoxColor	string	`'primary'`	复选框颜色
CheckBoxCheckSize	number	`36`	复选框按钮大小
CheckBoxActiveOpacity	number	`0.75`	按下时透明度
CheckBoxMarginHorizontal	number	`4`	复选框水平边距
CheckBoxTextFontSize	number	`28`	复选框文字大小

CheckBox 复选框 ​

介绍 ​

导入 ​

用法 ​

单独使用 ​

基础用法 ​

禁用状态 ​

自定义形状 ​

自定义颜色 ​

配合单元格组件使用 ​

切换选择 ​

API 参考 ​

CheckBox ​

Props ​

Events ​

Slots ​

CheckBoxGroup ​

Props ​

Events ​

Slots ​

Methods ​

主题变量 ​

CheckBox 复选框

介绍

导入

用法

单独使用

基础用法

禁用状态

自定义形状

自定义颜色

配合单元格组件使用

切换选择

API 参考

CheckBox

Props

Events

Slots

CheckBoxGroup

Props

Events

Slots

Methods

主题变量