扩展面板

在实现一个功能的同时,很可能需要界面上的 UI 交互,Cocos Creator 3D 也为扩展提供了这种能力。

在扩展里声明面板

在 package.json 里可以定义 panels 字段。

  1. {
  2. "name": "hello-world",
  3. "panels": {
  4. "default": {
  5. "title": "world panel",
  6. "type": "dockable",
  7. "main": "./panels/default.js",
  8. "icon": "./static/default.png"
  9. },
  10. "list": {
  11. "title": "world list",
  12. "type": "simple",
  13. "main": "./panels/list.js",
  14. "icon": "./static/list.png",
  15. "flags": {},
  16. "size": {}
  17. }
  18. }
  19. }

这个字段是个 object,定义如下:

  1. // panels 定义
  2. interface PanelMap {
  3. [name: string]: PanelInfo;
  4. }
  5. // 每个 panel 的定义
  6. interface PanelInfo {
  7. // 面板标题,支持 i18n:key 格式
  8. title: string;
  9. // 面板入口,一个相对路径
  10. main: string;
  11. // 面板图标,一个相对路径
  12. icon?: string;
  13. // 面板类型,默认 dockable
  14. type?: 'dockable' | 'simple';
  15. flags?: PanelFlags;
  16. size?: PanelSize;
  17. }
  18. // panel 里的一些标记
  19. interface PanelFlags {
  20. // 是否允许缩放,默认 true
  21. resizable?: boolean;
  22. // 是否需要保存,默认 false
  23. save?: boolean;
  24. }
  25. // panel 的一些尺寸限制
  26. interface PanelSize {
  27. width?: number;
  28. height?: number;
  29. 'min-width'?: number;
  30. 'min-height'?: number;
  31. }

编写面板

上面我们注册的时候定义了 panel 入口文件 panels/default.js

  1. // 监听面板事件
  2. exports.linsteners = {
  3. // 面板显示的时候触发的钩子
  4. show() {},
  5. // 面板隐藏的时候触发的钩子
  6. hide() {},
  7. };
  8. // 面板的内容
  9. exports.template = '<div>Hello</div>';
  10. // 面板上的样式
  11. exports.style = 'div { color: yellow; }';
  12. // 快捷选择器
  13. exports.$ = {
  14. elem: 'div',
  15. };
  16. // 面板启动后触发的钩子函数
  17. exports.ready = function() {
  18. this.$.elem.innerHTML = 'Hello World';
  19. };
  20. // 面板准备关闭的时候会触发的函数,return false 的话,会终止关闭面板
  21. exports.beforeClose = function() {};
  22. // 面板关闭后的钩子函数
  23. exports.close = function() {};

另外我们还定义了一个 list 面板,也需要按照上面的格式编写一个 list.js 文件