- API
1.1 Props
1.2 返回值类型
type SingleValue = string | number | boolean | undefined;
type MultipleValue = SingleValue[];
type GroupValue = {string:SingleValue};
type MultipleGroupValue = {string:SingleValue[]};
type Value = SingleValue | MultipleValue | GroupValue | MultipleGroupValue
export interface OptionItem<V = unknown> {
value: V
label?:
| React.ReactNode
| FC<{
item: OptionItem<V>
model?: any
}>
icon?:
| React.ReactNode
| FC<{
item: OptionItem<V>
model?: any
}>
activeIcon?:
| React.ReactNode
| FC<{
item: OptionItem<V>
model?: any
}>
disabled?: boolean
className?: string
error?: boolean
selected?: boolean
tip?:
| React.ReactNode
| FC<{
item: OptionItem<V>
model?: any
}>
children?:OptionItem<V>[]
}
- 示例
2.1 基本用法
{
title: '基本用法',
name: 'ChoiceSetter',
setter: 'ChoiceSetter',
type: 'String',
defaultValue: 'value1',
// 必须传入默认值，否则不推荐使用choiceSetter
setterProps: {
options: [
{
label: '选项一',
value: 'value1',
},
{
label: '选项二',
value: 'value2',
},
{
label: '选项三',
value: 'value3',
},
],
},
},
250px|700px|reset
2.2 禁用状态
{
title: '基本用法',
name: 'ChoiceSetterx',
setter: 'ChoiceSetter',
type: 'String',
defaultValue: 'value1',
disabled: true,
setterProps: {
options: [
{
label: '选项一',
value: 'value1',
},
{
label: '选项二',
value: 'value2',
},
{
label: '选项三',
value: 'value3',
},
],
},
},
250px|700px|reset
2.3 错误状态
{
title: '基本用法',
name: 'ChoiceSetterx',
setter: 'ChoiceSetter',
type: 'String',
defaultValue: 'value1',
setterProps: {
error: true,
options: [
{
label: '选项一',
value: 'value1',
},
{
label: '选项二',
value: 'value2',
},
{
label: '选项三',
value: 'value3',
},
],
},
},
250px|700px|reset
2.4 分组
{
type: 'Object',
title: '分组',
name: 'choice3',
setter: 'ChoiceSetter',
defaultValue: {
Group1: 'value1',
Group2: 'value3',
},
setterProps: {
optionGroups: [
{
groupName: 'Group1',
key: 'Group1',
options: [
{
label: '选项一',
value: 'value1',
tip: '选项一',
},
{
label: '选项二',
value: 'value2',
tip: '选项二',
},
],
},
{
groupName: 'Group2',
key: 'Group2',
options: [
{
label: '选项a',
value: 'value3',
tip: '选项a',
},
{
label: '选项b',
value: 'value4',
tip: '选项b',
},
],
}
],
},
},
250px|700px|reset
2.5 动态渲染 Options
{
title: '动态渲染option',
name: 'ChoiceSetter',
setter: 'ChoiceSetter',
type: 'String',
defaultValue: 'value1',
setterProps: {
customItemRender: ({ item }) => {
return (
<>
<GroupFilled />
{item.label}
</>
)
},
options: [
{
label: '选项一',
value: 'value1',
},
{
label: '选项二',
value: 'value2',
},
{
label: '选项三',
value: 'value3',
},
],
},
},
250px|700px|reset
2.6 动态获取 Options
{
type: 'String',
title: '动态获取Options',
name: 'choice',
setter: 'ChoiceSetter',
defaultValue: 'value1',
setterProps: {
options: {
type: 'Expression',
runner() {
// eslint-disable-next-line @typescript-eslint/require-await
return async () => {
const data = [
{
label: '我是动态获取的Options11',
value: 'value1',
},
{
label: '选项二',
value: 'value2',
},
{
label: '选项三',
value: 'value3',
},
];
return data;
};
},
},
},
},
250px|700px|reset
