如何在觸發特定事件時更改 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}"
            >
    ...
  `;
}