添加自定义动作

1.配置 config

export default{
  base,
  configuration,
  //...
  actions: [
    {
      name: '放大',
      value: 'enlarge',
      config: [   //自定义动作的配置项，在平台上选择该动作后展示相关控件
        {
          name: 'ratio',
          displayName: '放大倍数',
          value: 1,
          type: 'number'
        }
      ]
    }
  ]
}

{
  "base",
  "configuratio",
  ...
  "actions": [
    {
      "name": "放大",
      "value": "enlarge",
      "config": [  
        {
          "name": "ratio",
          "displayName": "放大倍数",
          "value": 1,
          "type": "number"
        }
    	]
    }
  ]
}

2.参数

事件名称：{actionName}_{id}
actions: 自定义动作的配置数据，与配置项的相同，不同的在于动态变化的config数据，如果没有动态变化的数据或者不需要用到，可以忽略

事件

通过监听事件名称来触发自定义动作，需要获取的参数为event.data，该值为配置的config转为对象的值

3.使用

const Demo = ({ id, emit, data, configuration }) => {
  const divRef = useRef(null);

  //... 
  useEffect(() => {
    const handleAction = (event) => {
      const { data = {} } = event;
      divRef.current.style = `transform: scale(${data.ratio})`
    }
    document.addEventListener(`scale_${id}`, handleAction, false);
    return () => {
      document.removeEventListener(`scale_${id}`, handleAction)
    }
  }, [])
  
  return (
    <div className="__easyv-component" id={id}>
      <div ref={divRef}>
        执行其他组件的事件，触发我的自定义动作“放大”
      </div>
    </div>
  );
}

4.配置自定义动作

为了测试该功能，需要先发布组件。

在交互面板的自定义事件中为控制组件（组件A）添加点击事件，被控制组件为绑定了自定义动作的组件（组件B），动作项则是选择我们配置的“放大”自定义动作，计划点击组件A时，组件B会放大

5.最终效果

点击右上角的预览按钮查看效果

6.示例Demo下载

custom-actions.zip

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