如何在触发特定事件时更改 Lit Element 的样式？

Question

（Lit 元素环境的新手，对于天真的问题深表歉意）

代码摘要

下面的代码是使用 Lit Element 制作的 File Uploader web 组件。 选择文件后，_inputHandler function 验证文件，如果有效，则启用/触发上传到服务器端的功能。

问题

如何将#cancel-btn css 样式设置为可见性：选择输入文件时可见？

（默认/加载页面时）只要没有选择文件，取消按钮就会保持隐藏状态。

选择有效文件后，应出现“取消”按钮（可见性：可见或其他）

Uploader.ts 的完整代码：

import { html, LitElement, css } from "lit";
import { customElement, property, query } from "lit/decorators.js";

import { styles } from "./Style.Uploader.js";

@customElement("file-uploader")
export class Uploader extends LitElement {
  // CSS Styling
  static get styles() {
    return styles;
  }

  // Properties
  @property()
  fileName = `Accepted File Types : ${getValidFileTypes().toString()}`;

  @property() fileType = "";

  @property() fileSizeInKB: Number = 0;

  private files: FileList | null = null;

  // Actual html elements Rendered

  render() {
    return html`
      <section>
        <form action="" autocomplete="off" enctype="multipart/form-data">
          <h3>Upload your File</h3>
          <div class="box" id="box">
            <input
              type="file"
              name="uploadedFile"
              id="input-box"
              class="input-box"
              style="display: none"
              @change="${this._inputHandler}"
            />
            <label for="input-box" class="input-label" id="input-label">
              ${this.fileName}
            </label>
          </div>

          <div class="buttons">
            <button
              class="upload-btn"
              id="upload-btn"
              @click="${this._uploadHandler}"
            >
              <span class="upload-btn-span" id="upload-btn-span">
                &#8682; Upload
              </span>
              <span class="uploading-span" id="uploading-span">
                Uploading...
              </span>
            </button>

            <button
              class="cancel-btn"
              id="cancel-btn"
              @click="${this._cancelHandler}"
            >
              Cancel
            </button>
          </div>

        </form>
      </section>
    `;
  }

  @query("upload-btn") uploadButton!: HTMLButtonElement;

  get cancelButton() {
    return this.querySelector("#cancel-btn"); // ?? null
  }

  // @query("cancel-btn") cancelButton!: HTMLButtonElement;

  private async _inputHandler(e: Event) {
    const input = e.target as HTMLInputElement;

    // array of files selected to upload
    this.files = input.files;

    if (!(this.files && this.files[0])) {
      return;
    } else {
      const uploadedFileSize = this.files[0]?.size;
      const uploadedFileName = this.files[0]?.name;

      const uploadedFileType =
        FileExtensionService.getFileExtension(uploadedFileName);


      // Trying to Change the visibility of the Cancel button to visible
      this.cancelButton!.style.visibility = "visible";

      // Validating file size and file type
      const validFileSize = await validateFileSize(uploadedFileSize);
      const validFileType = await validateFileType(uploadedFileType);
      if (!validFileSize.isValid) {
          ...
      }
    }
  }

  /**
   *
   * @returns
   */
  private _cancelHandler(e: Event) {
    e.preventDefault();
    this.files = null;
    this.fileName = "";
    this.fileType = "";
    this.fileSizeInKB = 0;
    this.requestUpdate();
  }
}

我正在尝试更改按钮的样式（我想我可以使用 getter 或通过@query 获取）但出现错误： Property 'style' does not exist on type 'Element'.ts(2339)用于： this.cancelButton..**style**;visibility = "visible";

Answer 1

您可以使用styleMap()内置指令根据其他一些属性/状态在取消按钮上进行动态样式设置。

例如

render() {
  return html`
    ...
            <button
              class="cancel-btn"
              id="cancel-btn"
              style=${styleMap({ visibility: this.files?.length ? 'visible' : 'hidden' })}
              @click="${this._cancelHandler}"
            >
    ...
  `;
}