Widget-core-designer NPM

widget-core-designer

将用户自定义部件转换为可在设计器中使用的部件，提供以下功能：

测量部件尺寸;
增加遮盖层，屏蔽部件与设计器冲突的事件;
覆盖部件的获取焦点效果;
为空容器增加可视化效果等。

如何使用

在你的项目中使用widget-core-designer时，需使用以下命令安装此包

npm install widget-core-designer

如何开发设计器版部件

开发步骤

创建部件类，为用户自定义部件添加设计器功能;

引入本项目中的DesignerWidgetMixin：

import DesignerWidgetMixin from 'widget-core-designer/DesignerWidgetMixin';

将原部件的属性与设计器部件的相关属性混合：

export default class UserCustomWidget extends DesignerWidgetMixin(UserCustomWidgetBase){}

根据部件特性进行部分属性的定制：
1. 覆写isContainer方法，该方法默认返回false，用于标识是否是容器部件，即内容为空时需要在设计器中默认撑开一定高度。
2. 覆写needOverlay方法，该方法默认返回false，针对输入框之类的部件需要在设计器中阻止点击事件，增加遮盖层。
```
protected isContainer(){
    return false;
}
protected needOverlay(){
    return false;
}
```

示例代码

自定义部件

export class UserCustomWidgetBase<P extends UserCustomWidgetProperties = UserCustomWidgetProperties> extends ThemedBase<P> {
    ...
}

export default class UserCustomWidget extends UserCustomWidgetBase<UserCustomWidgetProperties> {}

设计器使用的部件

import UserCustomWidgetBase from './widgets/UserCustomWidget';
import DesignerWidgetMixin from './DesignerWidgetMixin';

export class UserCustomWidget extends DesignerWidgetMixin(UserCustomWidgetBase){
    
    protected isContainer(){
       return true;
    }

    protected needOverlay(){
        return false;
    }
}

export default UserCustomWidget;