表单配置

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

表单全局配置

设置表单配置

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

• 组件模式

在模板中设置表单配置：

<form-create :option="option"></form-create>

• 全局方法

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

window.formCreate.create(rule, option)

构成

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

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

配置表单(form)

• 类型：Object

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

• 默认值:

  {
      layout: 'horizontal',
      labelAlign: 'right',
      labelColProps: {
          span: 3
      },
      wrapperColProps: {
          span: 21
      }
  }

• 完整配置项: Form props

配置示例

基础配置

const option = {
    form: {
        layout: 'horizontal',  // 水平布局
        labelAlign: 'right',  // 标签右对齐
        labelColProps: { span: 3 },  // 标签占3列
        wrapperColProps: { span: 21 } // 组件占21列
    }
}

垂直布局

const option = {
    form: {
        layout: 'vertical',  // 垂直布局
        labelAlign: 'left'   // 标签左对齐
    }
}

标签左对齐

const option = {
    form: {
        layout: 'horizontal',
        labelAlign: 'left',  // 标签左对齐
        labelColProps: { span: 6 },
        wrapperColProps: { span: 18 }
    }
}

响应式标签布局

const option = {
    form: {
        labelColProps: {
            xs: { span: 24 },  // <576px 时标签占满整行
            sm: { span: 12 },  // ≥576px 时标签占一半
            md: { span: 8 },   // ≥768px 时标签占1/3
            lg: { span: 6 }    // ≥992px 时标签占1/4
        },
        wrapperColProps: {
            xs: { span: 24 },
            sm: { span: 12 },
            md: { span: 16 },
            lg: { span: 18 }
        }
    }
}

设置表单尺寸

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

配置布局(row)

• 类型：Object

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

• 默认值:

  {
      gutter: 0,
  }

• 完整配置项: Row props

配置示例

设置栅格间隔

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

响应式间隔

const option = {
    row: {
        gutter: {
            xs: 8,   // <576px 时间隔8px
            sm: 16,  // ≥576px 时间隔16px
            md: 24,  // ≥768px 时间隔24px
            lg: 32   // ≥992px 时间隔32px
        }
    }
}

配置提交按钮(submitBtn)

• 类型：Object

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

• 默认值:

  {
      disabled: false,
      loading: false,
      type: 'primary',
      innerText: '提交',
      show: true,
      col: undefined,
      click: undefined,
   }

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

• 完整配置项: 布局规则 | Button_props

配置示例

基础配置

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

自定义按钮文字和样式

const option = {
    submitBtn: {
        innerText: '保存',
        type: 'primary',
        size: 'large',
        status: 'success'
    }
}

隐藏提交按钮

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

自定义按钮布局

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

自定义提交事件

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

配置重置按钮(resetBtn)

• 类型：Object

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

• 默认值:

  {
       disabled: false,
       loading: false,
       type: 'secondary',
       innerText: '重置',
       show: false,
       col: undefined,
       click: undefined
  }

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

• 完整配置项: 布局规则 | Button_props

配置示例

显示重置按钮

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

自定义重置按钮样式

const option = {
    resetBtn: {
        show: true,
        innerText: '清空',
        type: 'outline',
        size: 'large'
    }
}

自定义重置事件

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

悬浮提示框(info)

• 类型：Object

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

• 默认值:

  {
      type: 'popover',
      position: 'tl',
      icon: 'icon-info-circle'
  }

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

• 提示组件: Popover_props | Tooltip_props

配置示例

使用 Popover 提示

const option = {
    info: {
        type: 'popover',
        position: 'tl',  // 可选值: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb'
        icon: 'icon-info-circle',
        content: '这是字段说明'
    }
}

使用 Tooltip 提示

const option = {
    info: {
        type: 'tooltip',
        position: 'top',
        icon: 'icon-info-circle',
        content: '这是字段说明'
    }
}

自定义提示图标

const option = {
    info: {
        type: 'popover',
        position: 'tl',
        icon: 'icon-exclamation-circle',  // 自定义图标
        content: '请仔细填写此字段'
    }
}

禁用提示

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

配置 FormItem(wrap)

• 类型：Object

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

• 完整配置项: FormItem_props

配置示例

全局设置标签和组件布局

const option = {
    wrap: {
        labelColProps: { span: 6 },
        wrapperColProps: { span: 18 }
    }
}

全局设置字段帮助文本

const option = {
    wrap: {
        extra: '这是字段的额外说明信息'
    }
}

完整配置示例

const option = {
    // 表单整体配置
    form: {
        layout: 'horizontal',
        labelAlign: 'right',
        labelColProps: { span: 3 },
        wrapperColProps: { span: 21 },
        size: 'medium'
    },


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


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


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


// 提示信息配置
    info: {
        type: 'popover',
        position: 'tl',
        icon: 'icon-info-circle'
    },


// FormItem 配置
    wrap: {
        labelColProps: { span: 6 },
        wrapperColProps: { span: 18 }
    }
}