4.1.28 自定义界面元素定义参考

优质

小牛编辑

134浏览

2023-12-01

一份简单的元素定义

Editor.UI.registerElement('foobar-label', {
  template: `
    <div class="text">Foobar</div>
  `,

  style: `
    .text {
      color: black;
      padding: 2px 5px;
      border-radius: 3px;
      background: #09f;
    }
  `
});

自定义元素是基于 HTML5 的 Element 和 Custom Elements 标准。

选项

属性

style

使用 CSS 定义你的样式。同面板定义参考。

template

使用 HTML 标记语言定义你的面板的 UI 元素。

listeners

通过定义一个 Object 将 DOM 事件绑定到自定义函数上。这个 Object 的 Key 就是 DOM 事件名，Value 则是函数本身。同面板定义参考。

behaviors

behaviors 为一个数组，behaviors 会将数组中的元素通过 mixin 的方式融合到自定义元素本身。目前内置的 behaviors 有：

Editor.UI.Focusable
Editor.UI.Disabled
Editor.UI.Readonly
Editor.UI.Droppable
Editor.UI.ButtonState
Editor.UI.InputState

$

$ 为一个 Object，他可以通过 CSS 选择器的语法，将模板中的元素映射成 $ 变量方便用户使用。同面板定义参考。

函数

ready ()

当自定义元素被正确创建后，将会调动 ready 函数。

factoryImpl (arg1, arg2, ...)

他相当于构建函数，可以让你的自定义元素在构建的时候传递参数。例如：

let FoobarLabel = Editor.UI.registerElement('foobar-label', {
  template: `
    <div class="text"></div>
  `,

  $: {
    text: '.text'
  },

  factoryImpl ( text ) {
    this.$text.innerText = text;
  },
});

// 当定义完 factoryImpl，你可以就可以通过如下方法实例化创建
let el = new FoobarLabel('Hello World');
document.body.appendChild(el);

attributeChangedCallback ( name, oldVal, newVal )

当 element 的 html attribute 发生更改时（如调用了 setAttribute() 函数）触发。