RadioGroup 单选框
在一组备选项中进行单选
这是一个封装过的组件
RadioGroup
和 Element-Plus
中的 ElRadioGroup
有些不一样哦
额外拓展的属性
- 添加了
isButton
属性,用以切换RadioGroup
和RadioGroupButton
展示类型 - 添加了
option
属性,用以定义内部的选项, 使选项更具语义化 - 添加了
optionProps
属性,用以定义选项的状态value
、label
、disabled
、name
默认Option类型
使用 options
定义选项,options
的默认 typescript
声明如下
export interface Option {
/** 展示的文字 */
label: string
/** 值 */
value: any
/** 禁用状态 */
disabled?: bo
/** 源生name属性 */
name?: string
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
自定义Option类型
options
类型并不是固定不变的,如果你的数据格式不是这样的,您可以使用 optionProps
来告诉我们如何设置
optionConfig
的 typescript
声明如下
export interface OptionConfig {
/**
* label 字段名
*/
label?: string
/**
* value 字段名
*/
value?: string
/**
* 源生name字段名
*/
name?: any
/**
* 禁用字段名
*/
disabled?: string
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
展示为按钮
设置 isButton
即可以切换 radio
为按钮样式
自定义渲染option
通过设置slots.option
即可自定义选项的文字渲染
slots: {
option(item) {
return <span>{item.label}-{item.value}</span>
}
}
1
2
3
4
5
2
3
4
5
配置选项
RadioGroup
完全继承了 ElRadioGroup
的属性 您可以从下面的链接里找到相关文档
额外拓展的属性
- 添加了
isButton
属性,用以切换Checkbox
和CheckboxButton
展示类型 - 添加了
option
属性,用以定义内部的选项, 使选项更具语义化 - 添加了
optionConfig
属性,用以定义选项的状态value
、label
、disabled
、name
typescript
声明
type VRadioGroupProps = VueProps<typeof ElRadioGroup>
export interface VRadioGroupItem<
T extends object,
Key extends DeepKey<T> = DeepKey<T>,
> extends VBaseItem<T, Key> {
/**
* 类型 cascader
*/
props?: VPropDef<T, VRadioGroupProps>,
/**
* 是否是 RadioButton
*/
isButton?: DynamicDef<T, boolean>
/**
* 是否展示border
*
* 只有`isButton`为`false`生效
*/
border?: DynamicDef<T, boolean>
/**
* 选项 默认是 {@link VCommonOption}
*
* 为了ts验证,所以使用了any
*/
options?: DynamicDef<T, VCommonOption[]> | DynamicDef<T, any[]>
/**
* 可选项配置
*/
optionConfig?: VCommonOptionConfig
/**
* 插槽
*/
slots?: {
/**
* 自定义展示模板
*/
default?(): (JSX.Element | JSX.Element[] | string)
/**
* 无匹配选项时的内容
*/
option?(option: any): (JSX.Element | JSX.Element[] | string)
}
/**
* 数据转换
*/
transfer?: VTransfer<Into<T, Key>, any>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48