自定义表单组件

功能介绍

在装修自定义表单时，可以使用表单组件，也可以使用自定义组件，两者都可以搭配使用

框架定义的表单组件

系统框架已经定义好了一些基础的通用组件（不包含业务），若无业务需求，开发者可以正常使用，无需重复开发

文件位置：niucloud-core/src/main/resources/core/loader/diy_form/component.json

前端定义表单组件的编辑属性组件

框架定义的自定义表单组件目录为：admin/src/app/views/diy_form/components

uni-app 手机端渲染自定义表单组件

框架定义的自定义组件目录为：uni-app/src/app/components/diy（与自定义组件都在一个目录下）

开发自定义表单组件步骤

若框架定义的表单组件无法满足需求，可以自行开发表单组件

新建 component.json 文件

文件位置：niucloud-addon/shop/src/main/resources/shop/loader/poster/component.json

关键代码

{
  "CSSHOP_FORM_COMPONENT": {     // 组件分类关键字key，建议大写
    "title": "商城表单组件",    // 组件分类名称
    "support": [],
    "list": {    // 组件列表
      "FormSubmit": {   // 组件关键字key
        "title": "商城表单提交",    // 组件名称
        "icon": "iconfont icona-biaodantijiaopc30", // 组件图标
        "path": "edit-form-submit", // 组编辑组件属性名称
        "uses": 1,  // 最大添加数量，0为不限制
        "support": [],
        "sort": 10001,  // 排序号，从小到大
        "position": "bottom_fixed",  // 组件置顶标识，不能拖拽，可选值：fixed、top_fixed、right_fixed、bottom_fixed、left_fixed
        "template": {   // 组件属性
          "textColor": "#303133",    // 组件字体颜色
          "pageStartBgColor": "",    // 组件背景颜色
          "pageEndBgColor": "",    // 组件背景颜色
          "pageGradientAngle": "to bottom",  // 组件背景渐变角度
          "componentBgUrl": "",  // 组件背景图片
          "componentBgAlpha": 2,  // 组件背景图片透明度
          "componentStartBgColor": "",  // 组件背景颜色
          "componentEndBgColor": "",  // 组件背景颜色
          "componentGradientAngle": "to bottom",  // 组件背景渐变角度
          "topRounded": 0,  // 组件顶部圆角
          "bottomRounded": 0,  // 组件底部圆角
          "elementBgColor": "",  // 组件元素背景颜色
          "topElementRounded": 50,  // 组件元素顶部圆角
          "bottomElementRounded": 50,  // 组件元素底部圆角  
          "margin": {
            "top": 8,    // 组件顶部外边距
            "bottom": 0,  // 组件底部外边距
            "both": 10    // 组件左右外边距
          }
        },
        "value": {
          "btnPosition": "follow_content",
          "submitBtn": {
            "text": "提交",
            "color": "#ffffff",
            "bgColor": "#409EFF"
          },
          "resetBtn": {
            "control": true,
            "text": "重置",
            "color": "",
            "bgColor": ""
          }
        },
        "componentType": "diy_form"
      }
    }
  }
}

前端定义编辑属性组件

代码位置：admin/src/addon/shop/views/diy_form/components

根据 component.json 定义的 path 路径，需要在前端定义编辑属性组件

edit 编辑属性组件

框架封装好了表单组件公共设置和样式

组件忽略属性

每个组件可以根据自身业务情况，设置忽略组件样式，防止出现不可控效果 关键代码，为空时表示不忽略

目前可忽略的属性如下：

属性名	说明
pageBgColor	底部背景颜色
componentBgUrl	组件背景图
componentBgColor	组件背景颜色
marginTop	上边距
marginBottom	下边距
marginBoth	左右边距
topRounded	上圆角
bottomRounded	下圆角

uni-app手机端定义渲染组件

目录位置：uni-app/src/addon/shop/components/diy

根据 component.json 定义的组件关键字 key，需要在 uni-app 手机端定义渲染组件

例如：组件关键字 key 为 FormSubmit。渲染组件名称就是：form-submit，将驼峰命名改成横杠 - 分割即可。注意：组件文件名称是小写