Fes Design
本页目录

Radio 单选框 ​

组件注册 ​

js
import { FRadio, FRadioGroup, FRadioButton } 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>
    <FSpace>
        <FRadioGroup v-model="val1" :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"
            :cancelable="false"
            size="small"
            @change="handleChange"
        >
            <FRadioButton :value="1">选项一</FRadioButton>
            <FRadioButton :value="2">选项二</FRadioButton>
            <FRadioButton :value="3">选项三</FRadioButton>
            <FRadioButton :value="4">选项四</FRadioButton>
        </FRadioGroup>
    </FSpace>
    <FSpace>
        <FRadioGroup
            v-model="val3"
            :cancelable="false"
            type="primary"
            @change="handleChange"
        >
            <FRadioButton :value="1">选项一</FRadioButton>
            <FRadioButton :value="2">选项二</FRadioButton>
            <FRadioButton :value="3" disabled>选项三</FRadioButton>
            <FRadioButton :value="4">选项四</FRadioButton>
        </FRadioGroup>
        <FRadioGroup
            v-model="val4"
            :cancelable="false"
            size="small"
            type="primary"
            @change="handleChange"
        >
            <FRadioButton :value="1">选项一</FRadioButton>
            <FRadioButton :value="2">选项二</FRadioButton>
            <FRadioButton :value="3">选项三</FRadioButton>
            <FRadioButton :value="4">选项四</FRadioButton>
        </FRadioGroup>
    </FSpace>
    <FSpace>
        <FRadioGroup
            v-model="val5"
            :cancelable="false"
            :bordered="false"
            @change="handleChange"
        >
            <FRadioButton :value="1">选项一</FRadioButton>
            <FRadioButton :value="2">选项二</FRadioButton>
            <FRadioButton :value="3" disabled>选项三</FRadioButton>
            <FRadioButton :value="4">选项四</FRadioButton>
        </FRadioGroup>
        <FRadioGroup
            v-model="val6"
            :cancelable="false"
            size="small"
            :bordered="false"
            @change="handleChange"
        >
            <FRadioButton :value="1">选项一</FRadioButton>
            <FRadioButton :value="2">选项二</FRadioButton>
            <FRadioButton :value="3">选项三</FRadioButton>
            <FRadioButton :value="4">选项四</FRadioButton>
        </FRadioGroup>
    </FSpace>
    <FSpace>
        <FRadioGroup
            v-model="val7"
            :cancelable="false"
            :bordered="false"
            type="primary"
            @change="handleChange"
        >
            <FRadioButton :value="1">选项一</FRadioButton>
            <FRadioButton :value="2">选项二</FRadioButton>
            <FRadioButton :value="3" disabled>选项三</FRadioButton>
            <FRadioButton :value="4">选项四</FRadioButton>
        </FRadioGroup>
        <FRadioGroup
            v-model="val8"
            :cancelable="false"
            type="primary"
            size="small"
            :bordered="false"
            @change="handleChange"
        >
            <FRadioButton :value="1">选项一</FRadioButton>
            <FRadioButton :value="2">选项二</FRadioButton>
            <FRadioButton :value="3">选项三</FRadioButton>
            <FRadioButton :value="4">选项四</FRadioButton>
        </FRadioGroup>
    </FSpace>
</template>
<script>
import { ref } from 'vue';
export default {
    setup() {
        const val1 = ref(1);
        const val2 = ref(1);
        const val3 = ref(1);
        const val4 = ref(1);
        const val5 = ref(1);
        const val6 = ref(1);
        const val7 = ref(1);
        const val8 = ref(1);

        const handleChange = (value) => {
            console.log('[radio.button] [handleChange] value:', value);
        };
        return {
            val1,
            val2,
            val3,
            val4,
            val5,
            val6,
            val7,
            val8,
            handleChange,
        };
    },
};
</script>

配置方式 ​

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

play
<template>
    <FSpace>
        <FRadioGroup
            v-model="val"
            :cancelable="false"
            :options="options"
            @change="handleChange"
        >
        </FRadioGroup>
    </FSpace>
    <FSpace>
        <FRadioGroup
            v-model="val1"
            :cancelable="false"
            :options="options"
            optionType="button"
            @change="handleChange"
        >
        </FRadioGroup>
    </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 组件

Option Props ​

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