Cuttlefish Docs
  • 简体中文

    • 自定义组件

    Lessjs 支持自定义组件，你可以将可复用的逻辑实现封装成一个自定义组件来使用。

    自定义组件必须使用 spz-script 来定义，它需要一个 type="application/javascript" 属性来作为普通脚本使用，这是因为不配置该属性时，spz-script 脚本将会放入 Web Worker 中执行，当前在 Web Worker 中暂时不可以访问 SPZ 相关的全局变量。

    自定义组件是基于 ES6 class 继承 SPZ.BaseElement 来实现。

    基础用法

    在下面例子中，我们定义了一个 spz-custom-component 组件，它仅支持 container 布局。在自定义组件中，有几个函数需要了解。

    函数名描述
    constructor类的构造函数，通常用来定义一些变量，与原生类用法一致。在这里必须使用 super(element); 来调用父类的构造函数来正确定义元素。
    isLayoutSupported组件支持的布局。它返回一个布尔值，如果返回 true，当前使用的是正确的布局类型。layout 参数值是使用组件时 layout 属性配置的值。可以使用 SPZCore 对象定义的布局相关函数和值来处理布局逻辑。
    buildCallback构建回调函数。当组件开始构建时触发，通常用来做初始化。
    mountCallback构建/挂载完成的回调函数。当组件挂载完成后触发，通常用来做数据请求。
    unmountCallback卸载前的回调函数。通常用来卸载一些事件监听、变量重置等。
    layoutCallback元素及子节点完全挂载完成，通常用来进行相关的dom操作。
    <spz-custom-component layout="container"></spz-custom-component>

<spz-script layout="logic" type="application/javascript">
  class SpzCustomComponent extends SPZ.BaseElement {
    constructor(element) {
      super(element);
    }

    isLayoutSupported(layout) {
      return layout == SPZCore.Layout.CONTAINER;;
    }

    buildCallback() {
      // ...
    }

    mountCallback() {
      // ...
    }

    unmountCallback() {
      // ...
    }
  }

  SPZ.defineElement('spz-custom-component', SpzCustomComponent);
</spz-script>

    在自定义组件内部，我们可以直接使用 SPZCore 对象、SPZUtils 对象 和 SPZServices 对象。

    命名规范

    自定义组件需要遵循以下命名规范：

    • 自定义组件名称必需以 spz-custom- 开头。
    • 私有变量和函数以 _ 结尾。
    • 抛出的 API 方法命名不以 _ 结尾。

    this 对象

    自定义组件的 this 对象和普通的类的 this 对象不完全一样。自定义组件的 this 对象是普通类的 this 对象的增强版。我们可以通过 this 来访问、获取一下内容：

    参数说明
    this.element获取当前组件 DOM 元素
    this.win获取 window 对象
    this.getViewport()参考 Viewport 服务

    AI 使用建议（LLM Ready）

    • 章节密度：检测到 2 个二级标题。
    • 示例密度：检测到 1 个代码块。
    • 先读结论：优先提取本页“定义、约束、边界条件”。
    • 再读证据：根据代码示例确认可执行写法，不直接依赖自然语言段落。
    • 最后联动：涉及组件时同步查看对应组件页，避免文档与实现偏差。