lit-element - Как вызвать событие с кнопки слота? - PullRequest
Новая
       21

lit-element - Как вызвать событие с кнопки слота?

0 голосов
/ 26 февраля 2020

элемент 

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() с помощью кнопки слота?

Я проверил документы на события , но не нашел ничего подходящего для этого.

Заранее спасибо.

1 Ответ

2 голосов
/ 28 февраля 2020

Вам необходим прослушиватель событий щелчка в слоте или некоторый предок слота:

Попробуйте переместить привязку @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);
...