如何在Lit-HTML中使用事件偵聽器添加和刪除類？

Question

我想在類上添加和刪除'over' ，該元素是使用由“ dragEnter”和“ dragLeave”觸發的lit-html模板創建的元素：

#app {
  background-color: #72a2bc;
  border: 8px dashed transparent;
  transition: background-color 0.2s, border-color 0.2s;
}

#app.over {
  background-color: #a2cee0;
  border-color: #72a2bc;
}

const filesTemplate = () =>
html`
  <button id="app"     
    @dragover=${??}
    @dragleave=${??}     
  >
    Click Me
  </button>
`;

在我的舊系統中，我通過事件發射器在單獨的模塊中調用了這些方法，但是我希望可以使用lit-html在模板中定義所有這些方法。

 dragEnter(e) {
    this.view.element.className += ' over';
  }

  dragLeave(e) {
    this.view.element.className = element.className.replace(' over', '');
  }

Answer 1

這取決於您的自定義元素的外觀。 使用您的模板，您可以只放置@dragover=${this.dragEnter} 。 但是，如果您希望將其應用於整個自定義元素，而不僅僅是按鈕，則可以執行以下操作：

connectedCallback() {
super.connectedCallback();

this.addEventListener('dragover', this.dragEnter);

}

如果您沒有自定義元素，而僅使用lit-html，則必須將事件處理程序dragEnter(e)和dragLeave(e)放入模板中，如下所示： @dragover=${this.dragEnter}

您需要在dragEnter中添加帶有classList.add的類，並在dragLeave中將其刪除。 將來您可能會在lit-html中使用classMap指令，但是僅使用classList並沒有錯。 我會堅持只使用classList。 在很遠的將來，css可能還會有一個選擇器： 是否有CSS“：drop-hover”偽類？

Answer 2

反正比

this.view.element.className += ' over';

是

this.view.element.classList.add('over');

而是

this.view.element.className = element.className.replace(' over', '');

采用

this.view.element.classList.remove('over');

這樣比較好，因為可以避免很多錯誤，例如多次添加同一類。

我不知道lit-html但嘗試

let sayHello = (name, myClass) => html`<h1 class="${myClass}">Hello ${name}</h1>`;

https://lit-html.polymer-project.org/

Answer 3

我認為，為了以“ lit-html樣式”解決問題，解決方案必須是這樣的：

import { html, render} from 'lit-html';
import { classMap } from 'lit-html/directives/class-map.js';

const myBtnClasses = {
  over: false
};
function dragEnter(e) {
  myBtnClasses.over = true;
  renderFiles();
}
function dragLeave(e) {
  myBtnClasses.over = false;
  renderFiles();
}

const filesTemplate = (classes) =>
html`
  <button id="app" class="${classMap(myBtnClasses)}"
    @dragover=${dragEnter} @dragleave=${dragLeave}     
  >
    Click Me
  </button>
`;
function renderFiles() {
  render(filesTemplate(myBtnClasses), YOUR_CONTAINER);
}

使用lit-html ，每次狀態更改時，都必須將UI表示為“狀態”和“渲染”的函數，因此，本小示例中的最佳解決方案是將類視為狀態的一部分。