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

Question

我想在我的 class 中添加和删除 'over' 在使用由 'dragEnter' 和 [=21= 触发的 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

总之比

好

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');

这样更好，因为可以避免许多错误，例如多次添加相同的 class。

我不知道 lit-html 但尝试

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

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

Answer 2

这取决于您的自定义元素的外观。使用您的模板，您可以只输入 @dragover=${this.dragEnter}。但是，如果您希望它应用于整个自定义元素而不仅仅是按钮，您可以这样做：

connectedCallback() {
super.connectedCallback();

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

}

如果您没有自定义元素而只是单独使用 lit-html，您必须将事件处理程序 dragEnter(e) 和 dragLeave(e) 放入模板中，如下所示：@dragover=${this.dragEnter}

您需要在 dragEnter 中添加 class 和 classList.add，并在 dragLeave 中将其删除。将来你也许可以在 lit-html 中使用 classMap 指令，但是只使用 classList 也没有错。我会坚持只使用 classList。在遥远的未来 css 也可能有一个选择器：

Answer 3

我认为，为了解决 "lit-html style" 中的问题，解决方案必须是这样的：

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 表达为你的 "state" 和 "rerender" 每次你的状态改变时的函数，所以最好的解决方案是小例子是将您的类视为您所在州的一部分。

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

How do I add and remove classes using event listeners in Lit-HTML?

javascript

lit-html

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

How do I add and remove classes using event listeners in Lit-HTML?

javascript

lit-html

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