Coder Social home page Coder Social logo

怎样添加事件 about gaea-editor HOT 8 OPEN

ascoders avatar ascoders commented on July 22, 2024
怎样添加事件

from gaea-editor.

Comments (8)

ascoders avatar ascoders commented on July 22, 2024 2

@denvey 最近一两周内

from gaea-editor.

ascoders avatar ascoders commented on July 22, 2024

定义触发时机

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

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

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

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

from gaea-editor.

waybi avatar waybi commented on July 22, 2024

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

from gaea-editor.

ascoders avatar ascoders commented on July 22, 2024

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

from gaea-editor.

waybi avatar waybi commented on July 22, 2024

OK 谢谢解答

from gaea-editor.

denvey avatar denvey commented on July 22, 2024

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

from gaea-editor.

joebnb avatar joebnb commented on July 22, 2024

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

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

from gaea-editor.

wlxscn avatar wlxscn commented on July 22, 2024

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

from gaea-editor.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.