Skip to main content
  • 该组件可以参考如何通过普通组件做一个表单组件的能力
  • 注意:该组件仅供学习使用,并不是官方提供的标准组件。

1. 使用场景

  • 宜搭组件发布了一个自定义组件的功能,支持用低代码的方式做一个组件,但并不支持表单组件,只能做些展示型的组件。
  • 但文档上提示可以用已有的表单做存储,利用这种方式实现了个图片剪裁上传的组件,通过生成一个新的表单来存储数据,从而模拟出一个伪表单组件。

2. 效果演示

3. 操作步骤

1. 新建一个自定义组件;
2. 开启 schema 导入功能,和宜搭表单设计器的方式一样,具体可以参考:
  • 打开组件设计器,打开控制台,执行下面代码
3. 下面的 schema ,粘贴到组件设计器的 schema 控制台中,点击导入 schema

4. 案例涉及原理

  1. 主要是利用了绑定已有的表单组件做数据存储,从而实现数据提交。
  2. 缺点是在使用上有些成本,需要自己控制被绑定的组件的显隐。
  3. 图片裁剪使用的是开源的 react-cropper, https://www.npmjs.com/package/react-cropper ,因为还不支持 NPM 安装依赖,所以只能采用 CDN 动态加载的方案。