独立编辑模式

当用户想要修改组件配置时，默认情况下，用户只能通过右侧的配置面板进行修改，在大部分情况下这是一个不错的选择。但是在某些场景中，比如在3D组件中对物体进行拖拽添加点位等，通过鼠标/键盘进行交互修改配置的方式会更加简单直观。

本教程将说明如何为组件添加独立编辑模式，下面只展示必要的步骤，我们假定你已经阅读过快速入门或已经了解组件开发流程。

1. 添加配置

为了使组件进入独立编辑模式，需要修改config/main.json文件。我们首先定一个type为modal的特殊数据对象，这个对象只能放configuration的第一层中，对象会被解析成一个按钮，displayName为按钮的名称，defaultShowPanel为默认配置面板的显隐，value中定义的是独立编辑模式时右侧的配置项，规则跟其他的配置对象没什么不同。

{
  ...
  "configuration": [
    {
      "type": "modal",
      "name": "advancedConfig",
      "displayName": "高级配置",
      "defaultShowPanel":true,
      "value": [
        {
          "name": "component",
          "displayName": "全局样式",
          "value": [
            {
              "name": "fontSize",
              "displayName": "大小",
              "value": 32
            },
            {
              "name": "color",
              "displayName": "颜色",
              "value": "#ddd",
              "type": "color"
            }
          ]
        }
      ]
    }
  ]
}

2. 独立编辑状态

对于用户来说，进入独立编辑模式后，组件外观和配置项均会发生变化，但是对于开发者来说，只是一个状态标记的区别，平台通过edit属性告知组件当前处于何种状态，并且组件依旧可以获取到所有的配置值。有了独立编辑状态的标记后，开发者就可以控制独立编辑时的视图如何渲染

const MyComponent = props => {
  const { edit, configuration } = props;
  const { advancedConfig } = reduceConfig(configuration);
  ...
  return (
    <div ...>
      {edit && <p style={{ color: 'green' }}>正在编辑</p>}
      <p style={{ color: advancedConfig.component.color, fontSize: advancedConfig.component.fontSize }}>{data[0].text}</p>
    </div>
  );
};

3. 最终结果

4. 其他

示例源码下载

如遇其他使用问题，可扫描下方二维码，获取更多产品支持~