ui-form-checkbox+复选框组件

版本：v2.3.11

复选框组件用于在表单中提供多个选项的选择，支持单个复选框和复选框组两种使用方式，支持自定义样式和禁用状态。

基本使用

单个复选框

<template>
  <div class="form-checkbox-demo">
    <ui-form-checkbox v-model="checked" label="选项1" />
    <ui-form-checkbox v-model="checked2" label="选项2" />
    <p>选项1: {{ checked }}</p>
    <p>选项2: {{ checked2 }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checked = ref(false);
const checked2 = ref(true);
</script>

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

复选框组

<template>
  <div class="form-checkbox-group-demo">
    <ui-form-checkbox-group v-model="checkedValues">
      <ui-form-checkbox label="选项1" value="1" />
      <ui-form-checkbox label="选项2" value="2" />
      <ui-form-checkbox label="选项3" value="3" />
      <ui-form-checkbox label="选项4" value="4" />
    </ui-form-checkbox-group>
    <p>选中的值：{{ checkedValues }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checkedValues = ref(['1', '3']);
</script>

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

单个复选框 Props

参数	类型	默认值	说明
modelValue	Boolean	false	是否选中
label	String/Number	-	复选框标签文本
disabled	Boolean	false	是否禁用
shape	String	'square'	复选框形状，可选值：square、circle
size	String	'medium'	复选框大小，可选值：small、medium、large

单个复选框 Events

事件名	说明	回调参数
change	选中状态变化时触发	(value: Boolean) 当前选中状态

复选框组 Props

参数	类型	默认值	说明
modelValue	Array	[]	当前选中的复选框值数组
disabled	Boolean	false	是否禁用所有复选框
direction	String	'vertical'	复选框排列方向，可选值：vertical、horizontal

复选框组 Events

事件名	说明	回调参数
change	选中值变化时触发	(values: Array) 当前选中的值数组

示例

带图标的复选框

<template>
  <div class="form-checkbox-demo">
    <ui-form-checkbox v-model="checked" shape="circle">
      <template #icon="{ checked }">
        <span>{{ checked ? '✓' : '✗' }}</span>
      </template>
      自定义图标复选框
    </ui-form-checkbox>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checked = ref(false);
</script>

<style scoped>
.form-checkbox-demo {
  padding: 20px;
}
</style>

水平排列的复选框组

<template>
  <div class="form-checkbox-group-demo">
    <ui-form-checkbox-group v-model="checkedValues" direction="horizontal">
      <ui-form-checkbox label="选项1" value="1" />
      <ui-form-checkbox label="选项2" value="2" />
      <ui-form-checkbox label="选项3" value="3" />
    </ui-form-checkbox-group>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checkedValues = ref(['1', '2']);
</script>

<style scoped>
.form-checkbox-group-demo {
  padding: 20px;
}
</style>

禁用状态

<template>
  <div class="form-checkbox-disabled-demo">
    <!-- 单个禁用 -->
    <ui-form-checkbox v-model="checked" label="选项1" disabled />
    <ui-form-checkbox v-model="checked2" label="选项2" />
    
    <!-- 组禁用 -->
    <ui-form-checkbox-group v-model="checkedValues" disabled>
      <ui-form-checkbox label="选项1" value="1" />
      <ui-form-checkbox label="选项2" value="2" />
      <ui-form-checkbox label="选项3" value="3" />
    </ui-form-checkbox-group>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checked = ref(false);
const checked2 = ref(true);
const checkedValues = ref(['1']);
</script>

<style scoped>
.form-checkbox-disabled-demo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

不同形状的复选框

<template>
  <div class="form-checkbox-shape-demo">
    <ui-form-checkbox v-model="checked1" label="方形复选框" shape="square" />
    <ui-form-checkbox v-model="checked2" label="圆形复选框" shape="circle" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const checked1 = ref(false);
const checked2 = ref(true);
</script>

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

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/form/form-checkbox/form-checkbox

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/form/form-checkbox-group/form-checkbox-group