FormCreate

Appearance

表单配置 ​

本文将介绍如何设置表单配置中的UI相关配置，并详细说明各个配置项的作用。

表单全局配置

设置表单配置 ​

以下是设置表单配置的方法：

  • 组件模式

在模板中设置表单配置：

html
<form-create :option="option"></form-create>
  • 全局方法

你还可以通过全局方法创建表单并设置表单配置：

js
window.formCreate.create(rule, option)

构成 ​

全局配置中额外支持一下配置项

  • form：表单整体显示规则配置
  • row：表单组件布局配置
  • submitBtn：提交按钮样式配置
  • resetBtn：重置按钮样式配置
  • info：组件提示消息配置
  • wrap: 配置FormItem

配置表单(form) ​

  • 类型：Object

  • 说明：配置表单的整体显示规则，比如标签对齐方式和输入框对齐方式。

  • 默认值:

js
  {
    //行内表单模式
    inline: false,
    //表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
    labelPosition: 'right',
    //表单域标签的后缀
    labelSuffix: undefined,
    //是否显示必填字段的标签旁边的红色星号
    hideRequiredAsterisk: false,
    //表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
    labelWidth: '125px',
    //是否显示校验错误信息
    showMessage: true,
    //是否以行内形式展示校验信息
    inlineMessage: false,
    //是否在输入框中显示校验结果反馈图标
    statusIcon: false,
    //是否在 rules 属性改变后立即触发一次验证
    validateOnRuleChange: true,
    //是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
    disabled: false,
    //用于控制该表单内组件的尺寸 medium / small / mini
    size: undefined,
    //是否显示 label
    title: true
  }

配置示例 ​

基础配置 ​

js
const option = {
    form: {
        labelPosition: 'right',  // 标签位置
        labelWidth: '125px',     // 标签宽度
        size: 'default'          // 表单尺寸
    }
}

标签左对齐 ​

js
const option = {
    form: {
        labelPosition: 'left',   // 标签左对齐
        labelWidth: '125px'
    }
}

标签顶部对齐 ​

js
const option = {
    form: {
        labelPosition: 'top'     // 标签在顶部
    }
}

行内表单 ​

js
const option = {
    form: {
        inline: true  // 行内表单模式
    }
}

隐藏必填标记 ​

js
const option = {
    form: {
        hideRequiredAsterisk: true  // 隐藏必填字段的红色星号
    }
}

显示校验图标 ​

js
const option = {
    form: {
        statusIcon: true  // 在输入框中显示校验结果反馈图标
    }
}

设置表单尺寸 ​

js
const option = {
    form: {
        size: 'large'  // 可选值: 'large' | 'default' | 'small'
    }
}

配置布局(row) ​

  • 类型：Object

  • 说明：配置表单组件的布局，比如组件之间的间距。

  • 默认值:

js
  {
    //栅格间隔
    gutter: 0,
    //布局模式，可选 flex，现代浏览器下有效
    type: undefined,
    //flex 布局下的垂直排列方式 top/middle/bottom
    align: undefined,
    //flex 布局下的水平排列方式 start/end/center/space-around/space-between
    justify: undefined,
    //自定义元素标签
    tag: 'div'
  }

配置示例 ​

设置栅格间隔 ​

js
const option = {
    row: {
        gutter: 20  // 设置栅格间隔为20px
    }
}

使用 Flex 布局 ​

js
const option = {
    row: {
        type: 'flex',           // 使用 flex 布局
        justify: 'space-between', // 两端对齐
        align: 'middle'         // 垂直居中
    }
}

配置提交按钮(submitBtn) ​

  • 类型：Object

  • 说明：配置提交按钮的样式和布局。

  • 默认值:

js
  {
    //类型 primary / success / warning / danger / info / text
    type: "primary",
    //尺寸 medium / small / mini
    size: "medium",
    //是否朴素按钮
    plain: false,
    //是否圆角按钮
    round: false,
    //是否圆形按钮
    circle: false,
    //是否加载中状态
    loading: false,
    //是否禁用状态
    disabled: false,
    //图标类名
    icon: 'el-icon-upload',
    //按钮宽度
    width: '100%',
    //是否默认聚焦
    autofocus: false,
    //原生 type 属性
    nativeType: "button",
    //按钮内容
    innerText: "提交",
    //按钮是否显示
    show: true,
    //按钮布局规则
    col: undefined,
    //按钮点击事件
    click: undefined,
  }

如果不需要显示提交按钮，可以将 submitBtn 设置为 false 或 submitBtn.show 设置为 false。

配置示例 ​

基础配置 ​

js
const option = {
    submitBtn: {
        innerText: '提交',
        type: 'primary',
        show: true
    }
}

自定义按钮文字和样式 ​

js
const option = {
    submitBtn: {
        innerText: '保存',
        type: 'success',
        size: 'large',
        icon: 'el-icon-check'
    }
}

圆角按钮 ​

js
const option = {
    submitBtn: {
        innerText: '提交',
        type: 'primary',
        round: true  // 圆角按钮
    }
}

隐藏提交按钮 ​

js
const option = {
    submitBtn: false  // 或 submitBtn: { show: false }
}

自定义按钮布局 ​

js
const option = {
    submitBtn: {
        innerText: '提交',
        col: {
            span: 12,  // 按钮占据12列
            offset: 6  // 左侧偏移6列
        }
    }
}

自定义提交事件 ​

js
const option = {
    submitBtn: {
        innerText: '提交',
        click: (formData, fApi) => {
            console.log('提交数据:', formData)
            // 自定义提交逻辑
            return false  // 返回 false 阻止默认提交
        }
    }
}

配置重置按钮(resetBtn) ​

  • 类型：Object

  • 说明：配置重置按钮的样式和布局。

  • 默认值:

js
  {
    type: "default",
    size: "medium",
    plain: false,
    round: false,
    circle: false,
    loading: false,
    disabled: false,
    icon: 'el-icon-refresh',
    width: '100%',
    autofocus: false,
    nativeType: "button",
    innerText: "重置",
    show: false,
    col: undefined,
    click: undefined,
  }

如果需要显示重置按钮，可以将 resetBtn 设置为 true 或 resetBtn.show 设置为 true。

配置示例 ​

显示重置按钮 ​

js
const option = {
    resetBtn: {
        show: true,
        innerText: '重置',
        type: 'default'
    }
}

自定义重置按钮样式 ​

js
const option = {
    resetBtn: {
        show: true,
        innerText: '清空',
        type: 'info',
        size: 'large',
        icon: 'el-icon-delete'
    }
}

自定义重置事件 ​

js
const option = {
    resetBtn: {
        show: true,
        innerText: '重置',
        click: (fApi) => {
            console.log('重置表单')
            // 自定义重置逻辑
            fApi.resetFields()  // 重置表单字段
        }
    }
}

悬浮提示框(info) ​

  • 类型：Object

  • 说明：组件提示消息配置

  • 默认值:

js
  {
    //提示消息类型,popover,tooltip
    type:"popover",
    align: "left"
  }

可以在info配置项中设置提示组件的属性

配置示例 ​

使用 Popover 提示 ​

js
const option = {
    info: {
        type: 'popover',
        align: 'left',  // 对齐方式
        title: '提示',
        content: '这是字段说明'
    }
}

使用 Tooltip 提示 ​

js
const option = {
    info: {
        type: 'tooltip',
        placement: 'top',  // 可选值: 'top' | 'bottom' | 'left' | 'right'
        content: '这是字段说明'
    }
}

自定义提示位置 ​

js
const option = {
    info: {
        type: 'popover',
        align: 'right',  // 可选值: 'start' | 'end' | 'left' | 'right'
        title: '提示',
        content: '这是字段说明'
    }
}

禁用提示 ​

js
const option = {
    info: false  // 或 info: { show: false }
}

配置 FormItem(wrap) ​

  • 类型：Object

  • 说明：配置 FormItem 组件的显示规则，例如字段的样式和布局。

  • 完整配置项: FormItem_props

配置示例 ​

全局设置标签宽度 ​

js
const option = {
    wrap: {
        labelWidth: '150px'  // 全局标签宽度
    }
}

全局设置字段帮助文本 ​

js
const option = {
    wrap: {
        error: '这是错误提示信息'  // 错误提示
    }
}

完整配置示例 ​

js
const option = {
    // 表单整体配置
    form: {
        labelPosition: 'right',
        labelWidth: '125px',
        size: 'default'
    },


// 栅格布局配置
    row: {
        gutter: 20
    },


// 提交按钮配置
    submitBtn: {
        innerText: '提交',
        type: 'primary',
        show: true
    },


// 重置按钮配置
    resetBtn: {
        show: true,
        innerText: '重置',
        type: 'default'
    },


// 提示信息配置
    info: {
        type: 'popover',
        align: 'left'
    },


// FormItem 配置
    wrap: {
        labelWidth: '125px'
    }
}

FormCreate 是一个开源项目，基于 MIT 许可证发布，欢迎个人和企业用户免费使用

MIT Licensed | Copyright © 2018-present FormCreate
陕ICP备2024036423号-1