https://github.com/bianruanjian/widget-core-designer
the base repository for bianruanjian widgets
https://github.com/bianruanjian/widget-core-designer
designer dojo widget
Last synced: 5 months ago
JSON representation
the base repository for bianruanjian widgets
- Host: GitHub
- URL: https://github.com/bianruanjian/widget-core-designer
- Owner: bianruanjian
- Created: 2018-04-02T01:44:44.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-20T06:05:21.000Z (almost 7 years ago)
- Last Synced: 2025-04-05T08:35:07.240Z (6 months ago)
- Topics: designer, dojo, widget
- Language: TypeScript
- Size: 124 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Support: support/grunt/config.ts
Awesome Lists containing this project
README
# widget-core-designer
[](https://badge.fury.io/js/widget-core-designer)
将用户自定义部件转换为可在设计器中使用的部件，提供以下功能：
1. 测量部件尺寸;
2. 增加遮盖层，屏蔽部件与设计器冲突的事件;
3. 覆盖部件的获取焦点效果;
4. 为空容器增加可视化效果等。
## 如何使用
在你的项目中使用`widget-core-designer`时，需使用以下命令安装此包
```bash
npm install widget-core-designer
```
## 如何开发设计器版部件
### 开发步骤
1. 创建部件类，为用户自定义部件添加设计器功能;
2. 引入本项目中的`DesignerWidgetMixin`：
```typescript
import DesignerWidgetMixin from 'widget-core-designer/DesignerWidgetMixin';
```
3. 将原部件的属性与设计器部件的相关属性混合：
```typescript
export default class UserCustomWidget extends DesignerWidgetMixin(UserCustomWidgetBase){}
```
4. 根据部件特性进行部分属性的定制：
1. 覆写`isContainer`方法，该方法默认返回`false`，用于标识是否是容器部件，即内容为空时需要在设计器中默认撑开一定高度。
2. 覆写`needOverlay`方法，该方法默认返回`false`，针对输入框之类的部件需要在设计器中阻止点击事件，增加遮盖层。
```typescript
protected isContainer(){
return false;
}
protected needOverlay(){
return false;
}
```
### 示例代码
1. 自定义部件
```typescript
export class UserCustomWidgetBase
extends ThemedBase
{
...
}
export default class UserCustomWidget extends UserCustomWidgetBase {}
```
2. 设计器使用的部件
```typescript
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;
```
## 如何打包项目
进入项目的根目录，执行以下命令：
```bash
grunt dist
```