javascript - 如何在 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

这取决于您的自定义元素的外观。在您的模板中，您只需输入 @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?