import{ax as i,z as a,A as n,b5 as l}from"./chunks/framework.V2ssSR2R.js";const E=JSON.parse('{"title":"FormDialog组件 props","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-dialog-props.md","filePath":"api/form/form-dialog-props.md"}'),h={name:"api/form/form-dialog-props.md"};function t(k,s,p,e,r,g){return n(),a("div",null,[...s[0]||(s[0]=[l(`
详情: 表单配置
默认值: []
类型: 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>详情: 表单初始化值
默认值: {}
类型: 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>详情: 父级表单值,会透传给内部 Form 组件
类型: Object
详情: 弹窗宽度
类型: string | number
表单域标签的宽度,例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto。
默认值: '200px'
类型: string
详情: 是否全屏。
默认值: false
类型: boolean
详情: 是否禁用该表单内的所有组件。 若设置为 true,则表单内组件上的 disabled 属性不再生效。
默认值: false
类型: boolean
详情: 行内表单模式
类型: boolean
详情: 表单域标签的位置, 当设置为 left 或 right 时,则也需要设置 label-width 属性
类型: string
详情: 弹窗的 z-index
类型: number
详情: 弹出标题
类型: string
详情: 用于控制该表单内组件的尺寸
类型: 'small' | 'default' | 'large'
详情: 提交按钮文案
默认值: '确定'
类型: string
详情: 是否阻止内部 Form 原生 submit 事件的默认行为
类型: boolean
详情: 是否可以通过点击 modal 关闭 Dialog
默认值: false
类型: boolean
详情: 是否可以通过按下 ESC 关闭 Dialog
默认值: false
类型: boolean
详情: 关闭时销毁 Dialog 中的元素
默认值: false
类型: boolean
详情: 是否显示关闭按钮
默认值: true
类型: boolean
详情: 是否显示底部取消按钮
默认值: true
类型: boolean