如何使用 Lit-HTML 中的事件侦听器添加和删除类？

Question

我想在使用 'dragEnter' 和 'dragLeave' 触发的 lit-html 模板创建的元素上从我的类中添加和删除 'over'：

#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

我认为，为了以“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 表达为您的“状态”和每次状态更改时“重新渲染”的函数，因此这个小示例中的最佳解决方案是将您的类视为您的状态的一部分.

Answer 2

这取决于您的自定义元素的外观。使用您的模板，您只需输入@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 可能还会有一个选择器：Is there a CSS ":drop-hover" pseudo-class?

Answer 3

总比不上

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/