Vue DevUI
主题

Radio 单选框

单选框。

何时使用

用户要从一个数据集中选择单个选项，且能并排查看所有可选项，选项数量在 2~7 之间时，建议使用单选按钮。

相互独立的单选项 

<template> <d-radio v-for="item in baseList" v-model="baseChoose" :key="item" :value="item" class="mb-2"> The Radio value is: {{ item }} </d-radio> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const baseList = ref(['Item1', 'Item2', 'Item3']); let baseChoose = ref('Item1'); return { baseList, baseChoose, }; }, }); </script>

radio 根据条件终止切换操作

根据条件判断，第二项禁止跳转。

<template> <d-radio v-for="item in filterList" v-model="filterChoose" :key="item" :value="item" :beforeChange="filterBeforeChange" class="mb-2" @change="filterValChange" > The Radio value is: {{ item }} </d-radio> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const filterList = ref(['Item1', 'Item2', 'Item3']); let filterChoose = ref('Item1'); return { filterList, filterChoose, filterBeforeChange(value) { return value !== 'Item2'; }, filterValChange(val) { console.log('current value', val); }, }; }, }); </script>

radio-group 根据条件终止切换操作

根据条件判断，第二个 radio-group 禁止跳转。


<template> <d-radio-group class="mb-2" direction="row" v-model="groupFilterChoose1" :beforeChange="groupFilterBeforeChange"> <d-radio v-for="item in groupFilterList1" :key="item" :value="item"> {{ item }} </d-radio> </d-radio-group> <br /> <d-radio-group v-model="groupFilterChoose2" direction="row" disabled> <d-radio v-for="item in groupFilterList2" :key="item" :value="item"> {{ item }} </d-radio> </d-radio-group> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const groupFilterList1 = ref(['Spring', 'Summer', 'Autumn', 'Winter']); let groupFilterChoose1 = ref('Spring'); const groupFilterList2 = ['Spring', 'Summer', 'Autumn', 'Winter']; const groupFilterChoose2 = ref('Summer'); return { groupFilterList1, groupFilterChoose1, groupFilterList2, groupFilterChoose2, groupFilterBeforeChange(value) { return value !== 'Item2'; }, }; }, }); </script>

禁用 

<template> <d-radio v-for="item in disabledList" v-model="disabledChoose" :key="item" :value="item" class="mb-2" disabled> The Radio value is: {{ item }} </d-radio> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const disabledList = ref(['Item1', 'Item2', 'Item3']); let disabledChoose = ref('Item1'); return { disabledList, disabledChoose, }; }, }); </script>

横向排列 

<template> <d-radio-group direction="row" v-model="directionRowChoose"> <d-radio v-for="item in directionRowList" :key="item" :value="item"> The Radio value is: {{ item }}</d-radio> </d-radio-group> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const directionRowList = ref(['Item1', 'Item2', 'Item3']); let directionRowChoose = ref('Item1'); return { directionRowList, directionRowChoose, }; }, }); </script>

竖向排列 

<template> <d-radio-group :values="directionColumnList" v-model="directionColumnChoose"></d-radio-group> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const directionColumnList = ['Spring', 'Summer', 'Autumn', 'Winter']; const directionColumnChoose = ref('Summer'); return { directionColumnList, directionColumnChoose, }; }, }); </script>

自定义单选项

数组源可为普通数组、对象数组等。

<template> <d-radio-group direction="row" v-model="customChoose1"> <d-radio v-for="item in customList1" :key="item" :value="item"> The Radio value is: {{ item }}</d-radio> </d-radio-group> <d-radio-group direction="row" v-model="customChoose2"> <d-radio v-for="item in customList2" :key="item.name" :value="item.name"> The Radio value is: {{ item.name }} </d-radio> </d-radio-group> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const customList1 = ref(['Item1', 'Item2', 'Item3']); let customChoose1 = ref('Item1'); const customList2 = [{ name: 'Item1' }, { name: 'Item2' }, { name: 'Item3' }]; let customChoose2 = ref('Item3'); return { customList1, customChoose1, customList2, customChoose2, }; }, }); </script>

尺寸和边框

Small

Middle

Large

<template> <h4>Small</h4> <d-radio-group :values="sizeBorderList" v-model="sizeBorderChoose3" size="sm" border direction="row" style="margin-bottom: 10px;" ></d-radio-group> <h4>Middle</h4> <d-radio-group :values="sizeBorderList" v-model="sizeBorderChoose2" size="md" border direction="row" style="margin-bottom: 10px;" ></d-radio-group> <h4>Large</h4> <d-radio-group :values="sizeBorderList" v-model="sizeBorderChoose1" size="lg" border direction="row" style="margin-bottom: 10px;" ></d-radio-group> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const sizeBorderList = ['Spring', 'Summer']; const sizeBorderChoose1 = ref('Spring'); const sizeBorderChoose2 = ref('Spring'); const sizeBorderChoose3 = ref('Spring'); return { sizeBorderList, sizeBorderChoose1, sizeBorderChoose2, sizeBorderChoose3, }; }, }); </script>

按钮形态

需要把 d-radio 替换成 d-radio-button， 数组源可为普通数组、对象数组等。

禁用

默认

自定义填充颜色、文字颜色

 <template> <h4>禁用</h4> <d-radio-group direction="row" v-model="buttonChoose1" size="sm" style="margin-bottom: 10px;"> <d-radio-button v-for="item in buttonList1" :key="item.name" :value="item.name" :disabled="item.disabled" >{{ item.name }} </d-radio-button> </d-radio-group> <h4>默认</h4> <d-radio-group direction="row" v-model="buttonChoose2" size="md" style="margin-bottom: 10px;"> <d-radio-button v-for="item in buttonList2" :key="item.name" :value="item.name">{{ item.name }}</d-radio-button> </d-radio-group> <h4>自定义填充颜色、文字颜色</h4> <d-radio-group direction="row" v-model="buttonChoose3" size="lg" style="margin-bottom: 10px;" fill="rgb(255,193,7)" text-color="#ca3d3d" > <d-radio-button v-for="item in buttonList3" :key="item" :value="item"> {{ item }}</d-radio-button> </d-radio-group> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const buttonList1 = [{ name: 'Spring', disabled: true }, { name: 'Summer' }, { name: 'Autumn' }, { name: 'Winter' }]; let buttonChoose1 = ref('Summer'); const buttonList2 = [{ name: 'Spring' }, { name: 'Summer' }, { name: 'Autumn' }, { name: 'Winter' }]; let buttonChoose2 = ref('Spring'); const buttonList3 = ref(['Spring', 'Summer', 'Autumn', 'Winter']); let buttonChoose3 = ref('Spring'); return { buttonList1, buttonChoose1, buttonList2, buttonChoose2, buttonList3, buttonChoose3, }; }, }); </script>

Radio 参数

参数类型默认说明跳转 Demo
v-modelstring |number | boolean--绑定值互相独立的单选项
valuestring |number | boolean--必选，单选项值互相独立的单选项
namestring--可选，单选项名称互相独立的单选项
disabledbooleanfalse可选，是否禁用该单选项禁用
before-changeFunction / Promise--可选，radio 切换前的回调函数，
返回 false 可以阻止 radio 切换		回调切换
borderbooleanfalse可选， 是否有边框边框
sizeIRadioSizemd可选， radio 尺寸，只有在 border 属性存在时生效尺寸
can-cancel-selectbooleanfalse可选， 选中后，再次点击是否可取消选中
show-glow-stylebooleantrue可选，是否展示悬浮发光效果

Radio 事件

参数类型说明跳转 Demo
changeEventEmitter<string>单选项值改变时触发，返回选中的值互相独立的单选项

RadioGroup 参数

参数类型默认说明跳转 Demo
v-modelstring |number | boolean--绑定值竖向排列
namestring--可选，单选框的名称竖向排列
valuesarray--可选，单选数据组竖向排列
disabledbooleanfalse可选，是否禁用该选项组radio-group 根据条件终止切换操作
direction'row' | 'column''column'可选，设置横向或纵向排列横向排列
before-changeFunction | Promise--可选，radio-group 切换前的回调函数，
返回 false 可以阻止 radio-group 的切换		回调切换
borderbooleanfalse可选， 是否有边框边框
sizeIRadioSizemd可选， radio 尺寸，只有在 border 属性存在时生效尺寸
fillstring--可选，按钮形式的 Radio 激活时的填充色和边框色按钮形态
text-colorstring--可选， 按钮被选中的字体样式，只存在于按钮形态中按钮形态

RadioGroup 事件

事件名类型说明跳转 Demo
changeEventEmitter<string>单选项值改变时触发，返回选中的值竖向排列

RadioButton 参数

参数类型默认说明跳转 Demo
valuestring |number | boolean--必选，单选项值按钮形态
namestring--可选，单选项名称按钮形态
disabledbooleanfalse可选，是否禁用该单选项按钮形态

Radio 类型定义

IRadioSize 

type IRadioSize = 'lg' | 'md' | 'sm';
Contributors
粤A2-20044005号