定义 自定义组件配置
系统提供的插件类型有：’string‘, ‘number’，’boolean’, ‘select’,’color’, ‘display’, ‘box-editor’,’array’,’object’,
系统插件使用 查看：https://github.com/ascoders/gaea-editor

props配置

  1. props 定义class Props {
  2.   editSetting = { // editSetting 为 插件提供 必须的名称
  3.     key: 'gaea-page-header', // 关键字段必须，已gaea- 开头
  4.     name: '页头', // 组件名字 在组件栏展示
  5.     editors: [  // 该组件使用 插件的配置
  6.       "盒子模型",  // 配置底下连续 的 json 说明
  7.       {
  8.         type: 'box-editor' // 盒模型 系统提供 的插件，
  9.       },
  10.       "元素配置",,
  11.       {
  12.         field: 'title', // 字段名 会传到组件的props中
  13.         text: '标题', // 文本
  14.         type: 'string' // 使用的插件名 
  15.       },
  16.       {
  17.         field: 'subTitle',
  18.         text: '子标题',
  19.         type: 'string'
  20.       },
  21.       "选项设置",
  22.       // 数组对象配置
  23.       {
  24.         field: 'options',
  25.         text: 'Options',
  26.         type: 'array',
  27.         data: [
  28.           {
  29.             field: 'value',
  30.             type: 'string',
  31.             text: 'Value'
  32.           },
  33.           {
  34.             field: 'text',
  35.             type: 'string',
  36.             text: 'Text'
  37.           },
  38.           {
  39.             field: 'disabled',
  40.             type: 'boolean',
  41.             text: 'Disabled'
  42.           }
  43.         ]
  44.       },
  45.       {
  46.         field: 'disabled',
  47.         text: 'Disabled',
  48.         type: 'boolean'
  49.       },
  50.     ]
  51.   }
  52. }

组件中使用props

  1. import { PageHeader, Icon } from 'antd';
  2. import React, { Component } from 'react';
  3. import { Props, State } from './type'
  5. export default class AntBackTop extends Component {
  7.   static defaultProps = new Props(); // 必须示例化 并取名为defaultProps，gaea-editor会在初始化化的时候读取defaultProps
  8.   state = new State();
  9.   render() {
  10.     const { props } = this
  11.     return (
  12.     // this.props.styles 如果有使用盒模型的插件
  13.       <PageHeader style={this.props.styles} title={props.title} subTitle={props.subTitle} /> 
  14.     )
  15.   }
  16. }