FormDialog组件 props

config

• 详情： 表单配置

• 默认值： []

• 类型： FormConfig

  查看 FormConfig 及关联类型定义

  export type FormConfig<T = never> = FormItemConfig<T>[];

  export type FormItemConfig<T = never> = ChildConfig<T> | DynamicTypeConfig | EditorChildConfig<T> | T;

  export type ChildConfig<T = never> =
    | ContainerCommonConfig<T>
    | TabConfig<T>
    | RowConfig<T>
    | FieldsetConfig<T>
    | PanelConfig<T>
    | TableConfig
    | GroupListConfig<T>
    | StepConfig<T>
    | DisplayConfig
    | TextConfig
    | NumberConfig
    | NumberRangeConfig
    | HiddenConfig
    | LinkConfig<T>
    | DaterangeConfig
    | TimerangeConfig
    | SelectConfig
    | CascaderConfig
    | HtmlField
    | DateConfig
    | ColorPickConfig
    | TimeConfig
    | DateTimeConfig
    | CheckboxConfig
    | SwitchConfig
    | RadioGroupConfig
    | CheckboxGroupConfig
    | TextareaConfig
    | DynamicFieldConfig
    | ComponentConfig
    | FlexLayoutConfig<T>;

  export interface DynamicTypeConfig extends FormItem {
    type: TypeFunction;
    [key: string]: any;
  }

  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';
  }

• 示例：

<template>
  <m-form-dialog :config="config"></m-form-dialog>
</template>

<script setup>
  import { ref } from "Vue";

  const config = ref([
    {
      name: "text",
      text: "文本",
    },
    {
      name: "multiple",
      text: "多行文本",
      type: "switch",
    },
  ]);
</script>

values

• 详情： 表单初始化值

• 默认值： {}

• 类型： Object

• 示例：

<template>
  <m-form-dialog :values="values"></m-form-dialog>
</template>

<script setup>
  import { ref } from 'Vue';

  const values = ref([
    text: 'text',
    multiply: true,
  ]);
</script>

parentValues

• 详情： 父级表单值，会透传给内部 Form 组件

• 类型： Object

width

• 详情： 弹窗宽度

• 类型： string | number

labelWidth

• 详情：

表单域标签的宽度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto。

• 默认值： '200px'

• 类型： string

fullscreen

• 详情： 是否全屏。

• 默认值： false

• 类型： boolean

disabled

• 详情： 是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效。

• 默认值： false

• 类型： boolean

inline

• 详情： 行内表单模式

• 类型： boolean

labelPosition

• 详情： 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性

• 类型： string

zIndex

• 详情： 弹窗的 z-index

• 类型： number

title

• 详情： 弹出标题

• 类型： string

size

• 详情： 用于控制该表单内组件的尺寸

• 类型： 'small' | 'default' | 'large'

confirmText

• 详情： 提交按钮文案

• 默认值： '确定'

• 类型： string

preventSubmitDefault

• 详情： 是否阻止内部 Form 原生 submit 事件的默认行为

• 类型： boolean

closeOnClickModal

• 详情： 是否可以通过点击 modal 关闭 Dialog

• 默认值： false

• 类型： boolean

closeOnPressEscape

• 详情： 是否可以通过按下 ESC 关闭 Dialog

• 默认值： false

• 类型： boolean

destroyOnClose

• 详情： 关闭时销毁 Dialog 中的元素

• 默认值： false

• 类型： boolean

showClose

• 详情： 是否显示关闭按钮

• 默认值： true

• 类型： boolean

showCancel

• 详情： 是否显示底部取消按钮

• 默认值： true

• 类型： boolean