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() lol - person CENT1PEDE; 28.02.2020