注册元素

自定义元素的第 1 步是： 注册元素。

注册成功后可以导入导出 JSON 。

注意事项

TypeScript 环境需在 tsconfig.json 配置文件中开启装饰器功能支持：

tsconfig.json

{  "compilerOptions": {  "experimentalDecorators": true // 开启装饰器功能  } }

想要做成跨平台元素，需引入 @leafer-ui/core（跨平台核心包，用来代替 leafer-ui 包）、@leafer-ui/interface（接口） 作为外部依赖。

import { Rect } from '@leafer-ui/core'  export class CustomRect extends Rect {}

注册步骤

1. 注册元素

通过 registerUI() 方法注册元素。

实现原理：将元素的 tag 属性作为键值存放元素类。

2. 定义标签名

定义全局唯一的 tag 名称。

导入 json 时，通过 tag 属性查找对应元素类进行实例化。

示例

index.ts

// #自定义元素 [注册元素] import { Rect, registerUI } from '@leafer-ui/core' // 引入跨平台核心包   @registerUI() // 1. 注册元素 // class Custom extends Rect {   public get __tag() { return 'Custom' } // 2. 定义全局唯一的 tag 名称  }    // 使用自定义元素 import { Leafer, UI } from 'leafer-ui'  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创建自定义元素

index.js

import { Rect } from '@leafer-ui/core' // 引入跨平台核心包   class Custom extends Rect {   get __tag() { return 'Custom' } // 2. 定义全局唯一的 tag 名称  }  Custom.registerUI() // 1. 注册元素   // 使用自定义元素 import { Leafer, UI } from 'leafer-ui'  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创建自定义元素

下一步

注册数据