Switch 开关
表示两种相互对立的状态间的切换,多用于触发「开/关」。
基本用法
显示配置
扩展的 value 类型
设置 activeValue 和 inactiveValue 属性,接受 Boolean , String 或 Number 类型的值。
显示配置
禁用状态
设置 disabled 属性,接受一个 Boolean,设置 true 即可禁用。
显示配置
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 绑定值 | string | — | — |
| disabled | 是否禁用 | boolean / FilterFunction | — | false |
| active-value | switch 打开时的值 | boolean / string / number | — | true |
| inactive-value | switch 关闭时的值 | boolean / string / number | — | false |
查看 FilterFunction 及关联类型定义
ts
export type FilterFunction<T = boolean> = (
mForm: FormState | undefined,
data: {
model: FormValue;
values: FormValue;
parent?: FormValue;
formValue: FormValue;
prop: string;
config: any;
index?: number;
getFormValue: (prop: string) => any;
},
) => T;配置类型
查看 SwitchConfig 配置类型定义
ts
export interface SwitchConfig extends FormItem {
type: 'switch';
activeValue?: boolean | number | string;
inactiveValue?: boolean | number | string;
}ts
export interface FormItem {
/** vnode的key值,默认是遍历数组时的index */
__key?: string | number;
/** 表单域标签的的宽度,例如 '50px'。支持 auto。 */
labelWidth?: string | number;
/** label 标签的title属性 */
labelTitle?: string;
className?: string;
/** 字段名 */
name?: string | number;
/** 额外的提示信息,和 help 类似,当提示文案同时出现时,可以使用这个。 */
extra?: string | FilterFunction<string>;
/** 配置提示信息 */
tooltip?: ToolTipConfigType | FilterFunction<ToolTipConfigType>;
/** 是否置灰 */
disabled?: boolean | FilterFunction;
/** 使用表单中的值作为key,例如配置了text,则使用model.text作为key */
key?: string;
/** 是否显示 */
display?: boolean | 'expand' | FilterFunction<boolean | 'expand'>;
/** 值发生改变时调用的方法 */
onChange?: OnChangeHandler;
/** label 标签的文本 */
text?: string | FilterFunction<string>;
/** 右侧感叹号 */
tip?: string;
filter?: 'number' | OnChangeHandler;
/** 是否去除首尾空格 */
trim?: boolean;
/** 默认值 */
defaultValue?: any | DefaultValueFunction;
/** 表单验证规则 */
rules?: Rule[];
extensible?: boolean;
dynamicKey?: string;
/** 是否需要显示`展开更多配置` */
expand?: boolean;
style?: Record<string, any>;
fieldStyle?: Record<string, any>;
labelPosition?: 'top' | 'left' | 'right';
}