lit-element - Как да извикам събитие от слот бутон?

елемент

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

class Component extends LitElement {
  render () {
    return html`
      <slot name="activator">
        <button @click="${this.openDialog}">Default Button</button>
      </slot>

      <custom-dialog></custom-dialog>
    `;
  }

  openDialog () {
    // code to open dialog
  }
}

customElements.define('custom-dialog', Component);

index.html

<head>
  <script type="module" src="src/custom-dialog.js"></script>
</head>
<body>
  <custom-dialog>
    <button slot="activator">Outside Button</button>
  </custom-dialog>
</body>

Предвид потребителския компонент по-горе и моето внедряване на проста html страница. Ще забележите, че използвам бутон за слот.

Как да извикам метода openDialog() с помощта на бутона на слота?

Проверих документи за събития, но не намерих нищо свързано с това.

Благодаря предварително.


lit-element lit-html
person CENT1PEDE    schedule 26.02.2020    source източник

Отговори (1)


arrow_upward
2
arrow_downward

Имате нужда от слушател на събитие за щракване в слота или някакъв предшественик на слота:

Опитайте да преместите обвързването @click към самия слот елемент. click балон за събития, така че това ще обработи както бутона за съдържанието на слота по подразбиране, така и бутона с слота от лекия DOM. Това може да не работи в ShadyDOM, така че може да искате да поставите прослушаното събитие върху обвиващ елемент около слота.

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

class Component extends LitElement {
  render () {
    return html`
      <slot name="activator" @click="${this.openDialog}">
        <button>Default Button</button>
      </slot>

      <custom-dialog></custom-dialog>
    `;
  }

  openDialog () {
    // code to open dialog
  }
}

customElements.define('custom-dialog', Component);
person Justin Fagnani    schedule 28.02.2020
comment
Опитайте да преместите обвързването @click към самия елемент на слота. Уау, това има много повече смисъл от добавянето на събитие към възела на слота, когато събитието @slotchange е било задействано. Това правех досега. Друго решение е jquery way document.getElementById('foo').openDialog() хаха - person CENT1PEDE; 28.02.2020