Skip to content

Radio 单选框

组件注册

js
import { FRadio, FRadioButton, FRadioGroup } from '@fesjs/fes-design';

app.use(FRadio);
app.use(FRadioGroup);
app.use(FRadioButton);

代码演示

基础用法

单独使用可以表示两种状态之间的切换,写在标签中的内容为 radio 按钮后的介绍。

play
<template>
    <FSpace>
        <FRadio>单选框</FRadio>
        <FRadio disabled>单选框-禁用状态</FRadio>
    </FSpace>
</template>

组合用法

适用于多个勾选框绑定到同一个数组的情景,通过是否勾选来表示这一组选项中选中的项。

play
<template>
    <FSpace>
        <FRadioGroup v-model="val" :cancelable="false" @change="handleChange">
            <FRadio v-for="i in len" :key="i" :value="i">{{ i }}</FRadio>
        </FRadioGroup>
    </FSpace>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const val = ref();
        const len = 30;
        const handleChange = (value) => {
            console.log('[radio.group] [handleChange] value:', value);
        };
        return {
            len,
            val,
            handleChange,
        };
    },
};
</script>

垂直方向

play
<template>
    <FSpace>
        <FRadioGroup vertical>
            <FRadio :value="1">1</FRadio>
            <FRadio :value="2">22</FRadio>
            <FRadio :value="3">333</FRadio>
            <FRadio :value="4">4444</FRadio>
        </FRadioGroup>
        <FRadioGroup vertical disabled>
            <FRadio :value="1">1</FRadio>
            <FRadio :value="2">22</FRadio>
            <FRadio :value="3">333</FRadio>
            <FRadio :value="4">4444</FRadio>
        </FRadioGroup>
    </FSpace>
</template>

按钮组

单选按钮组,可通过 size 设置按钮组整体大小,对于单个按钮可以通过 disabled 设置是否禁用。 按钮样式分为两种,可以通过 type 进行设置。 按钮组分为有边框和无边框两种,可以通过进行 bordered 设置。

play
<template>
    <FForm>
        <FFormItem label="按钮边框:">
            <FRadioGroup
                v-model="bordered"
                :cancelable="false"
                :options="[
                    { label: '有边框(默认)', value: true },
                    { label: '无边框', value: false },
                ]"
            />
        </FFormItem>
        <FFormItem label="按钮大小:">
            <FRadioGroup
                v-model="size"
                :cancelable="false"
                :options="[
                    { label: 'middle(默认)', value: 'middle' },
                    { label: 'small', value: 'small' },
                ]"
            />
        </FFormItem>
        <FFormItem label="按钮样式:">
            <FRadioGroup
                v-model="type"
                :cancelable="false"
                :options="[
                    { label: 'default(默认)', value: 'default' },
                    { label: 'primary', value: 'primary' },
                ]"
            />
        </FFormItem>
    </FForm>

    <FDivider />

    <FSpace>
        <FRadioGroup
            v-model="val1"
            :size="size"
            :type="type"
            :bordered="bordered"
            :cancelable="false"
            @change="handleChange"
        >
            <FRadioButton :value="1">选项一</FRadioButton>
            <FRadioButton :value="2">选项二</FRadioButton>
            <FRadioButton :value="3" disabled>选项三</FRadioButton>
            <FRadioButton :value="4">选项四</FRadioButton>
        </FRadioGroup>
        <FRadioGroup
            v-model="val2"
            :size="size"
            :type="type"
            :bordered="bordered"
            :cancelable="true"
            @change="handleChange"
        >
            <FRadioButton :value="1">选项一</FRadioButton>
        </FRadioGroup>
    </FSpace>
</template>

<script setup>
import { ref } from 'vue';

const val1 = ref(1);
const val2 = ref(1);

const handleChange = (value) => {
    console.log('[radio.button] [handleChange] value:', value);
};

const bordered = ref(true);
const size = ref('middle');
const type = ref('default');
</script>

按钮组图标插槽

play
<template>
    <FRadioGroup v-model="value">
        <FRadioButton :value="1">
            <template #icon>
                <ProductOutlined />
            </template>
            选项一
        </FRadioButton>
        <FRadioButton :value="2">
            <template #icon>
                <StarOutlined />
            </template>
            选项二
        </FRadioButton>
        <FRadioButton :value="3">选项三</FRadioButton>
    </FRadioGroup>
</template>

<script setup>
import { ref } from 'vue';

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

配置方式

通过配置 options 直接生成选项,可以通过 optionType 设置生成项的类型

play
<template>
    <FSpace>
        <FRadioGroup
            v-model="val"
            :cancelable="false"
            :options="options"
            @change="handleChange"
        />
    </FSpace>
    <FSpace>
        <FRadioGroup
            v-model="val1"
            :cancelable="false"
            :options="options"
            optionType="button"
            @change="handleChange"
        />
    </FSpace>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const val = ref();
        const val1 = ref();
        const options = ref([]);
        const len = 10;
        for (let index = 1; index <= len; index++) {
            options.value.push({ label: index, value: index });
        }
        const handleChange = (value) => {
            console.log('[radio.options] [handleChange] value:', value);
        };
        return {
            val,
            val1,
            options,
            handleChange,
        };
    },
};
</script>

Radio Props

属性说明类型默认值
disabled是否禁用booleanfalse
label描述和介绍stringnull
v-model绑定值booleanfalse
value选中状态的值(搭配 RadioGroup 使用时有效)string / number / booleannull

Radio Events

事件名称说明回调参数
change当绑定值变化时触发的事件更新后的值

Radio Slots

名称说明
default描述和介绍。相比 label,slot 优先使用

RadioGroup Props

属性说明类型默认值
disabled是否禁用booleanfalse
v-model绑定值string | number | boolean-
vertical是否垂直排列(默认水平排列)booleanfalse
cancelable选中后是否可取消booleantrue
options选项配置array<Option>[]
valueField替代 Option 中的 value 字段名stringvalue
labelField替代 Option 中的 label 字段名stringlabel
optionType用于设置 Radio options 类型 可选值 default buttonstringdefault
type按钮样式类型 可选值 default primarystringdefault
size按钮大小 可选值 small middlestringmiddle
bordered按钮是否含有边框booleantrue
fullLine是否撑满整个父容器宽度booleanfalse

RadioButton Props

属性说明类型默认值
disabled是否禁用booleanfalse
label按钮描述和介绍stringnull
v-model按钮选定状态 双向绑定booleanfalse
value选中状态的值,RadioButton 需在 RadioGroup 标签内使用string / number / booleannull

RadioGroup Events

事件名称说明回调参数
change当绑定值变化时触发的事件更新后的值

RadioGroup Slots

名称说明
defaultRadio 组件
icon图标

Option Props

属性说明类型默认值
value选项的值,需要唯一string / number / boolean-
label选项的标签string / number-
disabled是否禁用booleanfalse