将 lit 属性限制为预定义字符串

Question

我正在lit中定义一个自定义文本输入组件（即：

<custom-textinput>

）

我想要一个名为

type

的自定义属性，默认情况下是“文本”，但开发人员可以传入

text | number | email | tel

，它们都是标准 html 上的有效输入

<input>

这是我当前的代码：

@customElement("custom-textinput")
export class CustomTextInput extends LitElement {
  @property({ type: String }) type: "text" | "number" | "email" | "tel" = "text";

  render() {
    return html`
    <input type = ${this.type}/>
   `
  }

其他类型应该受到限制（即：

radio

button

checkbox

），因为我正在为它们创建不同的组件。然而现在，当我使用

<custom-textinput>

并出于测试目的执行

<custom-textinput type="radio">

时，它会呈现单选按钮输入，而不是默认为

type="text

，因为我没有在类型属性中包含“radio”作为选项。我如何限制它只允许我预先确定的类型，而不允许任何在标准 html

<input>

元素上有效的内容？

Answer 1

您可以创建一个自定义访问器以仅允许某些值。

const VALID_TYPE = new Set(['text', 'number', 'email', 'tel']);

@customElement("custom-textinput")
export class CustomTextInput extends LitElement {
  #type: "text" | "number" | "email" | "tel" = "text";

  @property()
  set type(val: string) {
    if (VALID_TYPE.has(val)) {
      this.#type = val;
    } else {
      console.warn(`Tried to set invalid type: "${val}". Defaulting to "text".`);
      this.#type = "text";
    }
  }

  get type() {
    return this.#type;
  }

  render() {
    return html`
    <input type = ${this.type}/>
   `
  }