搭建协议设计 ​

Dooring 可编辑组件 Schema 设计 ​

Schema 分两部分:

• editData 组件可编辑属性的数组
• config 组件真正消费的数据

editData 详解 ​

editData 是 组件属性可编辑项的数组, 每一项里面包含了如下字段:

• key 属性名
• name: 属性名的中文显示
• type: 属性的可编辑类型
• isCrop(可选)
• cropRate(可选)
• range(type 为'Radio'或'Select'时的选项数组)
• 后期可能会扩展(详细结构可参考Dooring 开源版本)

key和name 都可以按照组件属性的语义来定, 这里值得一提的是 type. 不同属性的值类型不同, 所以我们编辑项的 type 也不同, 所有的类型如下:

• Upload 上传组件
• Text 文本框
• RichText 富文本
• TextArea 多行文本
• Number 数字输入框
• DataList 列表编辑器
• FileList 文件列表编辑器
• InteractionData 交互设置
• Color 颜色面板
• MutiText 多文本
• Select 选择下拉框
• Radio 单选框
• Switch 开关切换
• CardPicker 卡片面板
• Table 表格编辑器
• Pos 坐标编辑器
• FormItems 表单设计器

更详细的代码可以参考私有化部署版的editor/src/core/FormComponents 目录.

config 详解 ​

config 本质上是一个对象, 也就是组件所能暴露出来的属性集合, 和 editData 数组每一项的key 一致, 如下:

{
    cpName: 'Header',
    logoText: '',
    fontSize: 20,
    color: 'rgba(47,84,235,1)',
    height: 60,
    fixTop: false,
    menuList: [
      {
        id: '1',
        title: '首页',
        link: '/'
      },
      {
        id: '2',
        title: '产品介绍',
        link: '/'
      },
    ]
  }

editData 和 config 构成了一个 Dooring 组件的 schema 结构, 所以我们可以发现, 每一个 dooring 组件都具备如下结构:

• index.tsx 组件主文件(可以集成任何第三方开源库)
• index.less 组件的样式文件
• schema.ts 组件的schema(组件描述协议)
  • editData
  • config

当然组件的 schema 也可以根据自己的需求来扩展, 如果在组件设计上有疑问的, 可以随时联系 Dooring团队.