как реализовать select2 в litelement - PullRequest
Новая
       33

как реализовать select2 в litelement

0 голосов
/ 15 мая 2019

Я хотел бы знать, как реализовать выпадающий список select2 с изображениями в грамоте.Поскольку у меня есть динамические значения опций, как реализовать select с текстовым полем option и флагами в litelement

Я упоминал ниже исходный код, пожалуйста, знайте, как сделать select с флагами для динамических опций в litelement 

//my-element.js
import {
  LitElement,
  html,
  css
} from "https://unpkg.com/@polymer/lit-element/lit-element.js?module";
export class Calculator extends LitElement {
  static get properties() {
    return {
      otherCountries: { type: Array }
      };
  }

  constructor() {
    super();
    this.otherCountries = [
      //drop down list
      "Austria",
      "Belgium",
      "Bulgaria",
      "Cyprus",
      "Czech Republic",
      "Denmark",
      "Estonia",
      "Finland",
    ];
  }


  render() {
    return html`
      <link
        rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      />

      <form id="form_values" class="form-inline" role="form" autocomplete="off">

              <div class="col-7 form-group mr-auto">
                <div class="arrowicon">
                  <select
                    style="width: 170px"
                    name="sourcecountrycode"
                    class="calcFont form-control"
                    id="sourcecountrycode"
                    @change="${this.sourcecountryChange}"
                    value=""
                  >
                    ${this.countrydata.countries.map(
                      (country, key) => html`
                        <option value=${country.country_code}
                          >${country.country_name}</option
                        >
                      `
                    )}
                  </select>
                </div>
              </div>
        </form>

    `;
  }
}
customElements.define("calculator-home", Calculator);

1 Ответ

0 голосов
/ 18 мая 2019

Поскольку select2 является заменой блоков выбора на основе jQuery.Таким образом, в настоящее время надежно не работает из-за необходимости доступа jQuery ко всем узлам документа, работающим в границах теневого DOM.Полное объяснение здесь .

Но вы можете использовать lit-html в качестве примера со своим кодом:

Демо

...