自定义字段

如何创建自定义字段

在 LumeCMS 中，字段是标准的 Web components， 这使得扩展新字段变得非常容易。

要定义一个新字段，请使用 cms.field() 函数以及字段定义， 字段定义是一个包含以下值的对象：

  • tag: HTML 代码中使用的自定义元素的标签名。
  • jsImport: 包含自定义元素的 JavaScript 文件的 URL。此 文件将被加载到 HTML 中。
  • applyChanges: 一个函数，用于在存储之前，将 Web 组件接收的新值存储在 document 对象中。
  • init: (可选) 一个函数，用于初始化每个字段实例。

例如，让我们创建一个新的百分比字段，它只接受 0-100 之间的数字：

cms.field("percentage", {
  tag: "percentage-field",
  jsImport: "https://example.com/custom-fields/percentage-field.js",
  applyChanges(data, changes, field) {
    const { name } = field;
    const value = changes[name];
    data[name] = value ? Number(value) : undefined;
  },
});

创建自定义元素

当创建一个自定义元素时，建议扩展 LumeCMS 的 Component 类，它提供了一些你将需要的基本功能。

import { Component } from "lume_cms/components/component.js";

customElements.define(
  "percentage-field",
  class extends Component {
    init() {
      // 在这里写你的代码
    }
  },
);

init() 函数将在组件首次插入到 DOM 中时执行。以下属性也可用：

  • schema: 字段的选项（name，label，description，attributes 等）。
  • value: 字段值。
  • namePrefix: name 属性的前缀。组件生成的任何表单元素必须具有此前缀后跟一个点。

要创建百分比字段：

customElements.define(
  "percentage-field",
  class extends Component {
    init() {
      // 获取字段信息
      const { schema, value, namePrefix } = this;

      // 生成 input 的 name 和 id
      const name = `${namePrefix}.${schema.name}`;
      const id = `field_${name}`;

      // 打印 HTML 代码
      this.innerHTML = `
      <label for="${id}">${schema.label}</label>
      <input id="${id}" type="number" value="${value}" min=0 max=100 name="${name}>
    `;
    }
  },
);

Utils

LumeCMS 提供了一个包含一些实用工具的 utils.js 文件。push 函数创建一个新的 DOM 元素，并将其附加到作为第一个参数传递的元素。 上面的例子可以通过这种方式改进：

import { Component } from "lume_cms/components/component.js";
import { push } from "lume_cms/components/utils.js";

customElements.define(
  "percentage-field",
  class extends Component {
    init() {
      // 获取字段信息
      const { schema, value, namePrefix } = this;

      // 生成 input 的 name 和 id
      const name = `${namePrefix}.${schema.name}`;
      const id = `field_${name}`;

      // 添加 <label>
      push(this, "label", { for: id }, schema.label);

      // 添加 <input type="number">
      push(this, "input", {
        name,
        value,
        id,
        type: "number",
        min: 0,
        max: 100,
      });
    }
  },
);

查看 默认 Lume CMS 字段 以获取更多示例。

编辑此页