Radio 单选框

用于表单单选数据。

全局配置

在全局配置组件属性。

Radio组件属性配置

app.provide(RADIO_KEY, {
  size: 'default',
  type: 'default',
  // others props...
});

基础用法

传入data属性即可生成对应的数据，data属性可以是数组、Promise、Callback函数、Getter函数。

单选框类型

通过type属性可以设置单选框的类型。

属性&事件透传

该组件基于ElRadio封装，所以你可以传入ElRadioGroup的所有属性、事件，并且在数据数组中，你可以透传属性和事件给对应的ElRadio和ElRadioButton。

属性

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值，默认绑定value-key对应的值	T[keyof T] / T[keyof T][]	—
data	组件数据	LoadData<T> T[] | Promise<T[]> | ((resolve: (data: T[]) => void, reject: (reason: any) => void) => void) / () => LoadData<T>	[]
label-key	指定列表项文字为数据对象的某个属性值	string	label
value-key	指定列表项选中后绑定值为数据对象的某个属性值	string	value
type	单选框类型	enum 'default' | 'button'	default

类型声明

import type { LoadData } from '@liv-web/utils';
import type { RadioGroupProps as ElRadioGroupProps } from 'element-plus';

/**
 * 单选按钮组件属性
 * @template T 单选按钮数据类型
 */
export interface RadioProps<T> {
  /**
   * 组件数据
   * @remarks 可以是数组、Promise、Callback函数、Getter函数
   * @defaultValue []
   */
  data?: LoadData<T> | (() => LoadData<T>);
  /**
   * 指定单选按钮文字为数据对象的某个属性值
   * @defaultValue 'label'
   */
  labelKey?: keyof T;
  /**
   * 指定单选按钮绑定值为数据对象的某个属性值
   * @defaultValue ''value
   */
  valueKey?: keyof T;
  /**
   * 单选框类型
   * @defaultValue 'default'
   */
  type?: 'default' | 'button';
}

/**
 * 单选按钮组件包含透传属性在内的全部属性
 * @template T 单选按钮数据类型
 */
export type RadioFullProps<T> = Partial<ElRadioGroupProps & RadioProps<T>>;