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可能还会有一个选择器：Is there a CSS ":drop-hover" pseudo-class?

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表示为“状态”和“渲染”的函数，因此，本小示例中的最佳解决方案是将类视为您的状态。

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

3 个答案: