Skip to main content

1. 案例背景

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

2. 效果演示

3. 操作步骤

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

4. 案例涉及原理

  1. 在案例二的基础上,这边主要是利用了在组件配置属性「当变化时」可以写代码,写了生成 schema 的代码,自定生成存储数据的表单。
  2. 用户上使用上只要点击 「开启表单存储」即可。
  3. 图片裁剪使用的是开源的 react-cropper, https://www.npmjs.com/package/react-cropper ,因为还不支持 NPM 安装依赖,所以只能采用 CDN 动态加载的方案。