ChildEvent

Child 事件。

添加 / 移除事件的派发顺序为：子元素、父元素、Leafer 实例，渲染生命周期 中会监听。

leafer.ready 事件之后才会派发添加 / 移除事件，想在 ready 前 执行相关事件？

事件名称

ChildEvent.ADD

添加元素。

child.add

ChildEvent.REMOVE

删除元素。

child.remove

仅派发给元素自身的事件

ChildEvent.CREATED

创建元素。

created

ChildEvent.MOUNTED

挂载元素到 Leafer 上。

mounted

ChildEvent.UNMOUNTED

从 Leafer 上卸载元素。

unmounted

ChildEvent.DESTROY

销毁元素。

destroy

关键属性

child: ILeaf

子元素。

parent: ILeaf

父元素。

继承事件

Event

示例

child.ts

import { Leafer, Group, Rect, ChildEvent, LeaferEvent } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const group = new Group()

leafer.add(group)

function onReady() {

    const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

    leafer.on(ChildEvent.ADD, function (e: ChildEvent) {
        console.log('leafer', e.parent, e.child)
    })

    group.on(ChildEvent.ADD, function (e: ChildEvent) {
        console.log('parent', e.parent, e.child)
    })

    rect.on(ChildEvent.ADD, function (e: ChildEvent) {
        console.log('child', e.parent, e.child)
    })

    group.add(rect)
}

leafer.on(LeaferEvent.READY, onReady)

child.js

import { Leafer, Group, Rect, ChildEvent, LeaferEvent } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const group = new Group()

leafer.add(group)

function onReady() {

    const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

    leafer.on(ChildEvent.ADD, function (e) {
        console.log('leafer', e.parent, e.child)
    })

    group.on(ChildEvent.ADD, function (e) {
        console.log('parent', e.parent, e.child)
    })

    rect.on(ChildEvent.ADD, function (e) {
        console.log('child', e.parent, e.child)
    })

    group.add(rect)
}

leafer.on(LeaferEvent.READY, onReady)