1

我想'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', '');
  }
4

3 回答 3

2

这取决于您的自定义元素的外观。使用您的模板，您可以将@dragover=${this.dragEnter}. 但是，如果您希望将其应用于整个自定义元素而不仅仅是按钮，您可以执行以下操作：

connectedCallback() {
super.connectedCallback();

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

}

如果您没有自定义元素并且仅使用 lit-html 本身，则必须将事件处理程序放入模板中，如下所示dragEnter(e)：dragLeave(e)@dragover=${this.dragEnter}

您需要classList.add在dragEnter 中添加类并在dragLeave 中将其删除。将来您可能可以classMap在 lit-html 中使用指令，但是仅使用classList. 我会坚持只使用classList。在很遥远的未来，css 可能还会有一个选择器：是否有 CSS ":drop-hover" 伪类？

于 2019-01-23T21:13:12.917 回答
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 表达为“状态”和“重新渲染”的函数，因此这个小示例中的最佳解决方案是将您的类视为状态的一部分。

于 2019-05-09T11:41:00.670 回答
0

反正比

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/

于 2019-01-23T17:07:48.327 回答