Radio 单选框

type : 'radio'

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

代码演示

基础用法

注意

radio 采用了 radio-group 模式，原来 radio 的事件 click 触发事件为 click-option;

<template>
    <x-form ref="formRef" :label-align="formValue.labelAlign" :input-align="formValue.inputAlign" :model="formValue"
        :items="formOptions" @changeOption="(...args: any) => console.log('change-option', ...args)"
        @clickOption="(...args: any) => console.log('click-option', ...args)">
    </x-form>
    <div style="margin:10px">
        <van-button @click="onSubmit" block type="primary">验证</van-button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({
    labelAlign: '',
    inputAlign: '',
    checkbox: ['1', '2'],
});
const formOptions = ref([
    {
        label: 'label-align',
        type: 'radio',
        name: 'labelAlign',
        options: [
            { text: '顶部', value: 'top' },
            { text: '居中', value: 'center' },
            { text: '居右', value: 'right' },
        ]
    },
    {
        label: 'input-align',
        type: 'radio',
        name: 'inputAlign',
        options: [
            { text: '居左', value: 'left' },
            { text: '居中', value: 'center' },
            { text: '居右', value: 'right' },
        ],
        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

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