注册元素
自定义元素的第 1 步是: 注册元素。
注册成功后可以导入导出 JSON 。
注册步骤
1. 注册元素
通过 registerUI()
方法注册元素。
内部原理:将元素的 tag 属性作为键值存放元素类。
2. 定义标签名
定义全局唯一的 tag 名称。
导入 json 时,通过 tag 属性查找对应元素类进行实例化。
示例
ts
import { Leafer, Rect, UI, registerUI } from 'leafer-ui'
@registerUI() // 1. 注册元素
class Custom extends Rect {
public get __tag() { return 'Custom' } // 2. 定义全局唯一的 tag 名称
}
const leafer = new Leafer({ view: window })
const custom = new Custom({ width: 100, height: 200, fill: 'blue', draggable: true })
leafer.add(custom)
const json = custom.toJSON()
console.log(json) // 导出json {tag: 'Custom', width: 200, height: 50, fill: 'blue', draggable: true }
json.y = 300
leafer.add(UI.one(json)) // 通过json创建自定义元素
js
import { Leafer, Rect, UI, registerUI } from 'leafer-ui'
class Custom extends Rect {
get __tag() { return 'Custom' } // 2. 定义全局唯一的 tag 名称
}
Custom.registerUI() // 1. 注册元素
const leafer = new Leafer({ view: window })
const custom = new Custom({ width: 100, height: 200, fill:'blue', draggable: true })
leafer.add(custom)
const json = custom.toJSON()
console.log(json) // 导出json {tag: 'Custom', width: 200, height: 50, fill: 'blue', draggable: true }
json.y = 300
leafer.add(UI.one(json)) // 通过json创建自定义元素