如何在LitElement Web组件中切换类

问题描述

我正在使用预编译的样式表（来自SASS），只需要切换类。 我有两个要写入事件的元素。基于事件为是/否，我想在组件上切换一个类。

这项工作吗？

import { LitElement,html } from 'lit-element'
/**
 *
 *
 * @export
 * @class MenuMainButton
 * @extends {LitElement}
 */
export class MenuMainButton extends LitElement {
  static get properties() {
    return {
      name: { type: String },toggled: { type: String }
    }
  }

  constructor() {
    super()
    this.name = 'Menu'
    this.toggled = ''
    this.addEventListener('toggle-main-menu',this.handleEvents)
  }

  render() {
    return html`
      <a @click=${this._onClick} class="menu-button wk-app-menu-button app-menu-open ${this.toggled} govuk-body"
        >${this.name}</a
      >
    `
  }

  handleEvents(event) {
    this.toggled = event.toggle ? 'hide-item' : ''
  }

  _onClick() {
    const toggleMainMenu = new CustomEvent('toggle-main-menu',{
      toggle: this.toggled === '' ? 1 : 0
    })
    this.dispatchEvent(toggleMainMenu)
  }
}

window.customElements.define('main-menu-button',MenuMainButton)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）