如何在自定义元素中添加按钮单击事件答案

【问题标题】：how to add a button click event in a custom element如何在自定义元素中添加按钮单击事件
【发布时间】：2021-08-11 21:48:14
【问题描述】：

我想给 id:hamb-btn 的按钮添加一个点击事件，当点击它时，它将在 div class= "nav-link show" 元素中添加一个新类。如果按下 hamb 按钮，就像这样是添加类的示例。它是我的代码... 注意：我使用 webpack。

import { html, css, LitElement } from 'lit-element';

class SinDrawer extends LitElement {
    static get styles() {
        return css`
            nav {
                display: flex;
                padding: 8px;
                background-color: var(--main-color);
            }
        `;
    }

    constructor() {
        super();
    }

    render() {
        return html`
            <nav>
                <div class="nav-brand">
                    <a href="#/home">
                        <img src="./icons/icon_512.png" alt="sr-brand" height="50" title="Sinfor-Resto">
                    </a>
                </div>
                <div class="nav-link">
                    <a href="#/home" class="nav-anchor">Beranda</a>
                    <a href="#/favorite" class="nav-anchor">Favorite</a>
                    <a href="#/about" class="nav-anchor">Tentang</a>
                </div>
                <button id="hamb-btn" onclick="">&#9776;</button>
            </nav>
        `;
    }
}

customElements.define('sin-drawer', SinDrawer);

【问题讨论】：

标签： javascript webpack lit-element

【解决方案1】：

您始终可以使用 classMap 或 styleMap 指令在 Lit 组件中进行动态样式设置。更多信息请访问Dynamic classes and styles。

import { html, css, LitElement } from 'lit-element';
import { classMap } from 'lit/directives/class-map.js';

class SinDrawer extends LitElement {
  static get styles() {
    return css`
      nav {
        display: flex;
        padding: 8px;
        background-color: var(--main-color);
      }
    `;
  }

  static get properties() {
    return {
      _show: { state: true },
    };
  }

  constructor() {
    super();
    this._show = false;
  }

  show() {
    this._show = !this._show;
  }

  render() {
    return html`
      <nav>
        <div class="nav-brand">
          <a href="#/home">
            <img src="./icons/icon_512.png" alt="sr-brand" height="50" title="Sinfor-Resto" />
          </a>
        </div>
        <div class="nav-link ${classMap({ show: this._show })}">
          <a href="#/home" class="nav-anchor">Beranda</a>
          <a href="#/favorite" class="nav-anchor">Favorite</a>
          <a href="#/about" class="nav-anchor">Tentang</a>
        </div>
        <button id="hamb-btn" @click=${this.show}>&#9776;</button>
      </nav>
    `;
  }
}

customElements.define('sin-drawer', SinDrawer);

【讨论】：

【解决方案2】：

这可以通过 3 个简单的步骤完成。

如下添加属性‘newClass’，并在构造函数中将this.newClass初始化为“”。

     static get properties(){
        return{
             newClass: String
            }
        }

在 div 中添加“newClass”，如下所示

 <div class="nav-link ${this.newClass}">

点击按钮后，this.newClass 将包含新的类名。

<button id="hamb-btn" @click=${e=>this.newClass =”newClassName”}>&#9776;</button>

由于 this.newClass 被添加到元素的属性中，它会重新渲染 DOM 并使用 class=”nav-link newClassName” 更新 div

【讨论】：