Checkbox 多选框

type : 'checkbox'

在一组备选项中进行多选。

代码演示

基础用法

<template>
    <div class="">
        <x-form ref="formRef" label-width="120px" :model="formValue" :items="formOptions"></x-form>
        <div style="margin:10px">
            <van-button @click="onSubmit" block type="primary">验证</van-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({
    checkbox: ['1', '2'],
});
const formOptions = ref([
    {
        label: 'Checkbox 多选',
        type: 'checkbox',
        name: 'checkbox',
        options: [
            { text: '男', value: '1', attrs: { disabled: true } },
            { text: '女', value: '0' },
            { text: '未知', value: '2' },
        ],
        attrs: {
            shape: 'square',
        }
    },
]);

const onSubmit = () => {
    formRef.value?.validate().then(() => {
        console.log('submit values =', formValue.value);
    }).catch((error: any) => {
        console.log('error', error);
    })
}
</script>
<style lang="scss" scoped></style>

基础用法

API

Props

与官方组件 Checkbox 复选框 参数保持一致，这里以展示新增属性配置为主，具体配置参见官方文档。

Events