Checkbox

简易介绍

checkbox 复选框，用于用户从多个选项中选择一个或多个。mengyue-components 进行了封装并进行了 vitest 测试。 实现复选框的标签有两种： <MYCheckbox /> 或者 <MYCheckbox></MYCheckbox><MYCheckbox-group /> 或者 <MYCheckbox-group></MYCheckbox-group> 复选框组

基础用法

单个复选框

使用 modelValue 可以绑定单个复选框的值。

代码演示

单个复选框

<template>
  <MYCheckbox v-model='singleChecked'>单个复选框</MYCheckbox>
</template>

展开代码

复选框组

使用 <MYCheckbox-group></MYCheckbox-group> 可以将复选框分组。

代码演示

选项1选项2选项3

<template>
  <MYCheckbox-group v-model='selectedValues1'>
    <MYCheckbox value='option1'>选项1</MYCheckbox>
    <MYCheckbox value='option2'>选项2</MYCheckbox>
    <MYCheckbox value='option3'>选项3</MYCheckbox>
  </MYCheckbox-group>
</template>

展开代码

布局方向

垂直排列

使用 direction="vertical" 将复选框垂直排列。

代码演示

苹果香蕉橙子

<template>
  <MYCheckbox-group v-model='selectedValues2' direction='vertical'>
    <MYCheckbox value='apple'>苹果</MYCheckbox>
    <MYCheckbox value='banana'>香蕉</MYCheckbox>
    <MYCheckbox value='orange'>橙子</MYCheckbox>
  </MYCheckbox-group>
</template>

展开代码

禁用状态

整个组禁用

禁用整个复选框组。

代码演示

红色绿色蓝色

<template>
  <MYCheckbox-group v-model='selectedValues3' disabled>
    <MYCheckbox value='red'>红色</MYCheckbox>
    <MYCheckbox value='green'>绿色</MYCheckbox>
    <MYCheckbox value='blue'>蓝色</MYCheckbox>
  </MYCheckbox-group>
</template>

展开代码

自定义间距

使用 gap 属性控制复选框之间的间距。

代码演示

猫狗鸟

<template>
  <MYCheckbox-group v-model='selectedValues5' gap='72px'>
    <MYCheckbox value='cat'>猫</MYCheckbox>
    <MYCheckbox value='dog'>狗</MYCheckbox>
    <MYCheckbox value='bird'>鸟</MYCheckbox>
  </MYCheckbox-group>
</template>

展开代码

API 参考

MYCheckboxGroup Props

参数	说明	类型	可选值	默认值
modelValue	绑定值	array	—	[]
direction	布局方向	string	horizontal/vertical	horizontal
disabled	是否禁用	boolean	—	false
gap	间距	string	支持 CSS 单位	12px

MYCheckbox Props

参数	说明	类型	可选值	默认值
modelValue	绑定值	boolean	—	false
value	选项值	string | number	—	—
disabled	是否禁用	boolean	—	false

类型定义

interface CheckboxGroupProps {
  modelValue?: (string | number)[];
  direction?: 'horizontal' | 'vertical';
  disabled?: boolean;
  gap?: string;
}

interface CheckboxProps {
  modelValue?: boolean;
  value?: string | number;
  disabled?: boolean;
}