更新记录

1.0.2（2024-04-16）

第二次使用修改

1.0.1（2024-04-11）

改成规范

1.0.0（2023-12-12）

无

平台兼容性

需要帮助可直接联系qq2786885584

啰嗦一下

• 自己做自己用方便引用，后续会增加插件一步一步完善

  修改记录

• 20240124 修改md文档 未

必看提醒

• 仅支持微信小程序

  使用方式

  传参

  参数	类型	说明
  formcolumn	Object	对象,详情看下方formcolumn参数表格
  postData	Object	参数对象，属性名要与formcolumn的key一致
  uploadPath	String	图片上传地址
  imgUrl	String	图片显示路径前缀（部分上传接口用的是相对路径时启用）
  init	function	初始化方法，传的obj对应的属性名为上方的key：绑定数据属性名（编辑用）

formcolumn参数

type参数

示例

- html
 <kf-form ref="refform" :uploadPath='uploadPath' :imgUrl='imgUrl' :formcolumn="formcolumn"></kf-form>
- js
- formcolumn=[
        { type: 'title', name: '基本信息' },
        { type: 'inputshow', name: '停车证ID', placeholder: '请输入停车证id', key: 'id' },
        { type: 'input', name: '联系人', placeholder: '请输入姓名', key: 'username' },
        { type: 'input', name: '联系方式', placeholder: '请输入手机号', key: 'mobile' },
        { type: 'image', name: '营业执照', key: 'business_license', parakey: 'company_name', required: false, msg: '请上传营业执照', formData: { user_id: this.userInfo.id, ocr_type: '1' } },
        { type: 'input2', name: '企业名称', placeholder: '上传营业执照自动识别，可修改', key: 'company_name' },
        { type: 'image', name: '行驶本正面', tip: '（需和行驶本保持一致）', parakey: 'license_number', required: false, borderBottom: true, msg: '请上传行驶本正面', key: 'driving_book', formData: { user_id: this.userInfo.id, ocr_type: '2', CardSide: '1' } },
        { type: 'image', name: '行驶本反面', tip: '（需和行驶本保持一致）', required: false, zdyrequired: true, msg: '请上传行驶本反面', key: 'driving_book_blank', formData: { user_id: this.userInfo.id, ocr_type: '2', CardSide: '2' } },
        { type: 'car', name: '车牌号', placeholder: '上传行驶本自动识别，可修改', key: 'license_number' },
        { type: 'title', name: '收件地址' },
        { type: 'input', name: '联系人', placeholder: '请输入收件人姓名', key: 'logistics_username' },
        { type: 'input', name: '联系方式', placeholder: '请输入收件人手机号', key: 'logistics_mobile' },
        { type: 'pickeraddr', name: '收货地址', placeholder: '请选择省市区', key: 'logistics_address' },
        { type: 'input', name: '详细地址', placeholder: '请填写详细地址', key: 'logistics_address_detail' },
        { type: 'textarea', name: '备注', placeholder: '默认顺丰快递，若无法收取请填写备注内容', key: 'remark' }
    ] 
    let postData = {
        id: '', //id
        username: '联系人', //联系人
        mobile: '联系电话', //联系电话
        business_license: '营业执照', //营业执照
        company_name: '公司名称', //公司名称
        driving_book: '行驶本', //行驶本
        driving_book_blank:  '', //行驶本反面
        license_number: '车牌号', //车牌号
        logistics_username: '物流联系人', //物流联系人
        logistics_mobile: '物流联系电话', //物流联系电话
        logistics_address: '收货地址', //收货地址
        logistics_address_detail: '收货详细地址', //收货详细地址
        remark: '备注' //备注
    }
    this.$refs.refform.init(postData)

插槽

<template v-slot:imgright_driving_book_blank></template>

代码逻辑