扩展面板

在实现一个功能的同时，很可能需要界面上的 UI 交互，Cocos Creator 3.0 也提供了扩展功能。

在扩展里声明面板

在 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",
  16.             "flags": {},
  17.             "size": {}
  18.         }
  19.     }
  20. }

这个字段是个 object，定义如下：

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

编写面板

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

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

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