hot-form/src/components/form/props.config.js

A project developed based on ant-design-vue and vant whitch do some things on create/render/modify and etc. for forms. Also can custom some component on the form items if you want. 一个基于antdv/vant开发的创建表单组件，包含表单渲染、表单编辑页面、以及植入自定义附加内容的组件

// 传入的props统一配置

// 上传的基本字段序列
export const basicList = {
  // 基本字段序列
  basicList: {
    type: [Array, Object],
    default: () => [],
  },
};

// 表单头所需的属性集合
/* const formHeaders = [
  'key',
  '_id',
  'title',
  'titleColor',
  'titleBack',
  'themeBack',
  'submitTxt',
  'submitColor',
  'submitBack',
]; */

// const hasOwnProperty = Object.prototype.hasOwnProperty;

// 表单数据存储载体
export const formFields = {
  // 表单实际存储载体
  formFields: {
    type: Object,
    default: () => ({
      headers: {
        key: 'header', // 类型键
        _id: 'header', // 唯一标志 `key`
        // 标题
        title: '标题', // 表单标题
        titleColor: '#333', // 标题颜色
        titleBack: '#fff', // 标题背景颜色
        // 主体
        themeBack: '#fff', // 表单主体颜色
        // 提交按钮
        submitTxt: '提交', // 按钮文本
        submitColor: '#fff', // 按钮文本颜色
        submitBack: '#52A7B5', // 按钮背景颜色
      },
      lists: [], // 表单项
    }),
  },
};

// 图片上传方法
export const imgCustomRequest = {
  // 自定义上传方法
  imgCustomRequest: {
    type: [Object, Function, String],
    required: true,
  },
};

// 文件上传方法
export const fileCustomRequest = {
  // 自定义上传方法
  fileCustomRequest: {
    type: [Object, Function, String],
    required: true,
  },
};

// 额外增加的字段信息
export const addedLists = {
  // 额外增加的字段信息
  addedLists: {
    type: [Object, Array],
  },
};

// 文件代理
export const fileProxy = {
  // 文件代理的地址
  fileProxy: {
    type: String,
  },
};

// 是否为编辑状态
export const edit = {
  edit: { // 是否为编辑表单状态，默认 `false`
    type: Boolean,
    default: false,
  },
};

// 是否为可拖动类型
export const dragged = {
  // 编辑状态下是否可拖动表单
  dragged: {
    type: Boolean,
    default: false,
  },
};

// 是否需要隐藏提交按钮
export const hideSubmit = {
  // 是否隐藏提交按钮
  hideSubmit: {
    type: Boolean,
    default: false,
  },
};

// 获取检查通过与否的标志
export const checkSubmit = {
  // 检查表单通过与否的标志
  checkSubmit: {
    type: Boolean,
    default: false,
  },
};

// 是否禁止填写
export const disabled = {
  disabled: {
    type: Boolean,
    default: false,
  },
};

// 短信验证码的请求
export const validateCode = {
  validateCode: {
    type: Function,
    default: null,
  },
};

// 短信验证码的等候时间（单位: s）
export const codeTimeWait = {
  codeTimeWait: {
    type: [String, Number],
    default: 60,
  },
};

// 图片附加验证规则
export const imgRules = {
  imgRules: {
    type: Array,
    validator: rules => rules.every(rule => typeof rule.validator === 'function'),
  },
};

// 图片文件大小上限（单位字节：byte）
export const imgMaxSize = {
  imgMaxSize: {
    type: Number,
    default: Infinity,
  },
};

// 附件文件附加验证规则
export const fileRules = {
  imgRules: {
    type: Array,
    validator: rules => rules.every(rule => typeof rule.validator === 'function'),
  },
};

// 附件文件大小限制（单位字节：Byte）
export const fileMaxSize = {
  fileMaxSize: {
    type: Number,
    default: Infinity,
  },
};