ascoders / gaea-editor

Design websites in your browser. A smart web editor!
https://gaeajs.github.io/gaea-site/
MIT License
1.34k stars 222 forks source link

怎样添加事件 #26

Open waybi opened 6 years ago

waybi commented 6 years ago

image 假如 有这样一个需求 我自定义一个按钮组件,然后我需要给这个按钮加个事件,比如就加个跳转,点击按钮跳转到百度,能丢一个例子出来参考下怎么写么?谢谢!

ascoders commented 6 years ago

定义触发时机

首先在注册按钮组件时,定义它的支持的事件:

class Props {
  public editSetting = {
    key: 'my-button',
    name: 'Button',
    editors: [
      // ..省略
    ],
    events: [
      {
        text: 'OnClick',
        field: 'onClick'
      }
    ]
  };
}

上面通过 events 注册了一个 OnClick 事件,事件的触发时机是 Button 组件的 onClick 回调触发时,而按钮实现 onClick 一般都是点击后触发,所以这个事件的触发时机就是点击按钮的时候触发。

下一步就是触发效果了,触发效果现在不能拓展,我最近会增加一个链接跳转的方式,这样只要组件注册了触发时机,就可以选择跳转到某个 url 了。

waybi commented 6 years ago

主要是触发效果不知道怎么写,不了解内部事件机制的原理,有点无从下手,好比说我怎么跳转到内部其他页面去,点按钮打开模态框等等交互,最近也在看源码,但事件那部分还没弄懂,希望大神点拨点拨

ascoders commented 6 years ago

事件这块还在完善中,Modal 联动功能现在还不支持,具体效果完成后交互方式应该是这样:https://tb1.bdstatic.com/next-designer/event-emit.mp4

waybi commented 6 years ago

OK 谢谢解答

denvey commented 6 years ago

什么时候会更新到github上,期待ing

ascoders commented 6 years ago

@denvey 最近一两周内

joebnb commented 4 years ago

貌似事件这块现在也没有完成,发现 event emitter 没有对外暴露,也没有提供注册内部event的方法,而且在新的page里面没有store管理的状态,我理解的Gaea editor应该基于事件流,通过上面的方法修改组件的状态,通过自定义的函数和服务器交互,然后再走 redux 那一套把数据绑到 view 上,完成整个逻辑的渲染。

前几天试了试clone 的代码,今天有看,如果有不对的地方,或者已经完成,还请指正

wlxscn commented 4 years ago

@ascoders 事件机制我看现在的代码还是没有实现视频上的功能