添加属性

自定义元素的第 3 步是： 添加属性。

属性分为普通属性和数据属性，我们这里主要讲的是数据属性（可以导出为 JSON 的属性）

添加步骤

1. 在接口中添加属性

需要在输入数据、数据处理（计算数据）接口中添加属性（js 可忽略）。

2. 在元素中添加属性

添加数据属性后，还需要为属性指定一个 属性处理器，导出时才能进入 JSON。

属性处理器

自动为数据属性生成有相关业务功能的 setter/getter 函数，常用如下：

boundsType

边界类型。

当属性有变化时，会引起元素的重新布局和渲染。

surfaceType

表面类型。

当属性有变化时，会引起元素的重新渲染， 但不会布局。

dataType

数据类型。

当属性有变化时，不会重新布局和渲染。

特殊处理

set 逻辑处理

可以在数据处理类上通过set + 属性名为元素添加 set 处理逻辑。

如果数据属性没有特殊的逻辑，只需创建一个空的数据处理类即可，内部会自动处理一切。

// 添加 width 的set处理逻辑
export class CustomData extends RectData {
  _width: number // 计算数据的私有变量

  //会自动转为 width 的 setter函数 并移除掉，所以不要调用super.setWidth(value)
  setWidth(value: number): void {
    this._width = Math.ceil(value)
    // 通过 this.__leaf 可访问元素自身
  }
}

数据处理类的变量命名

1. 无下划线的变量：计算数据 getter/setter 变量， 自动生成，不可设置。

2. 单个下划线变量：计算数据的私有变量，按需自动生成，可设置。

3. 注意其他变量只能通过两个下划线 __开头的名字命名!!!，否则会有问题。

// 其他变量命名
export class CustomData extends RectData {
  __isAutoSize: number // 非数据属性，用来辅助业务逻辑
}

示例

index.ts

import { Leafer, Rect, RectData, registerUI, dataProcessor, boundsType } from 'leafer-ui'
import { IRectInputData, IRectData } from '@leafer-ui/interface'


// 1. 在数据接口中添加属性

export interface ICustomInputData extends IRectInputData {
    left?: number | string // 输入数据，必须为可选
}

export interface ICustomData extends IRectData {
    left?: number // 计算数据，必须为可选
}

export class CustomData extends RectData implements ICustomData {

}

@registerUI()
export class Custom extends Rect {

    public get __tag() { return 'Custom' }

    @dataProcessor(CustomData)
    declare public __: ICustomData

    // 2. 添加属性，并指定属性处理器
    @boundsType(0)
    declare public left: number | string

    constructor(data: ICustomInputData) {
        super(data)
        // ...
    }

}


const leafer = new Leafer({ view: window })
const custom = new Custom({ left: 50, width: 100, height: 200, fill: 'blue', draggable: true })

leafer.add(custom)

console.log(custom.toJSON()) // 导出json {tag: 'Custom',left: 50, width: 200, height: 50, fill: 'blue', draggable: true }

index.js

import { Leafer, Rect, RectData, registerUI, dataProcessor, boundsType } from 'leafer-ui'


export class Custom extends Rect {
    get __tag() { return 'Custom' }
}

export class CustomData extends RectData {

}

Custom.registerUI()
 Custom.registerData(CustomData)

// 1. 添加属性，并指定属性处理器
Custom.addAttr('left', 0, boundsType) 


const leafer = new Leafer({ view: window })
const custom = new Custom({ left: 50, width: 100, height: 200, fill: 'blue', draggable: true })

leafer.add(custom)

console.log(custom.toJSON()) // 导出json {tag: 'Custom',left: 50, width: 200, height: 50, fill: 'blue', draggable: true }

下一步

添加方法