(Примечание: для Vue.js 2 проверьте, Создайте собственное автозаполнение с помощью Vue.js 2)

Со времен jQuery я загружал разные плагины каждый раз, когда хотел создать ввод Автозаполнение. Позже в Bootstrap появился компонент Typeahead, а затем они удалили его из Bootstrap 3, и мне пришлось использовать typeahead.js, когда я разрабатывал Encollege.

Когда я перешел на Vue.js, я понял, насколько это дает мне возможность создавать собственный компонент пользовательского интерфейса с гораздо меньшими усилиями. Это заставило меня много подумать, прежде чем использовать зависимость только для компонента пользовательского интерфейса. По возможности я быстро пишу собственный компонент, используя Vue.js, и это дает мне большую свободу и контроль.

Разработка простого компонента на Vue.js практически не требует времени на чтение документации по внешней зависимости.

Итак, здесь мы увидим, как создать быстрый компонент Автозаполнение с помощью Vue.js.

Давайте воспользуемся инструментами Vue CLI, чтобы быстро приступить к разработке компонентов Vue.js. Обычно я использую это для быстрого прототипирования компонентов перед добавлением их в проекты.

Если вы не установили инструменты Vue CLI, запустите npm install -g vue-cli, а затем запустите автозаполнение vue init browserify-simple.

Мы собираемся использовать Bootstrap для стилизации, поэтому убедитесь, что вы связали CSS-файл Bootstrap с index.html. Ваш index.html должен выглядеть так.

Теперь перейдите в папку src и создайте файл с именем Autocomplete.vue.

Сначала давайте решим, как должен выглядеть наш компонент с точки зрения использования.

<autocomplete :suggestions="cities" :selection.sync="value"></autocomplete>

Здесь нам нужны два свойства. предложения - это массив, который вы передаете компоненту, который будет использоваться для отображения предложений автозаполнения, а выбор - это окончательное значение, которое было введено пользователем во вводе. .synchas нужно добавить к элементам с двусторонней привязкой, чтобы обеспечить синхронизацию при изменении родительских и дочерних компонентов.

Пришло время создать раздел script файла Vue.

Свойство selection должно иметь двустороннюю привязку, поскольку оно должно обновлять значение в родительском компоненте, привязанном к свойству selection.

Давайте определим шаблон для компонента в файле Autocomplete.vue.

Теперь у нас есть шаблон и объект-компонент. Это дает нам базовую структуру компонента. Половина нашей работы уже сделана. Что нам еще нужно сделать, так это добавить логику фильтрации и привязку событий, например, Когда должны появиться предложения, Что должно произойти, если я выберу предложение и т. Д.

В шаблоне мы упомянули что-то под названием соответствует в v-for. совпадения должны быть массивом предложений, соответствующих текущему вводу. Это хорошо подходит для вычисляемого свойства. Вычисляемые свойства больше похожи на функцию наблюдения в Angular.js. Он будет вычислять соответствующие предложения на основе ввода всякий раз, когда ввод изменяется автоматически.

И нам нужно еще одно вычисляемое свойство с именем openSuggestion, которое будет использоваться для добавления открытого класса, чтобы сделать раскрывающийся список предложений видимым и невидимым в соответствии с контекстом.

Итак, давайте добавим вычисляемое свойство к компоненту (в файл vue в части Еще впереди)

Теперь вы можете протестировать то, что мы сделали до сих пор, с помощью npm run dev (при условии, что вы выполнили npm install). Мы уже добились отображения предложений. Остается обработать события, чтобы выбрать предложение.

Нам нужно обработать эти пять событий

  • Нажатие стрелки вниз
  • Нажатие стрелки вверх
  • Щелчок по предложению
  • Нажатие Enter на предложении
  • Изменение ввода

В процессе нам также необходимо обновить класс, чтобы выделить активное предложение.

Давайте обновим шаблон, чтобы добавить эти пять событий.

Теперь нам нужно добавить раздел методов, чтобы добавить обработчики этих событий.

Теперь наш компонент автозаполнения полностью готов!

Итак, давайте напишем код для его использования. В main.js мы собираемся использовать компонент автозаполнения.

И в index.html добавьте в тело следующее:

<div class="container" style="padding-top:50px;">
    <autocomplete :suggestions="cities" :selection.sync="value">      </autocomplete>
</div>

Итак, наконец, вы должны увидеть что-то вроде этого.

Исходный код доступен на Github.

Сообщение опубликовано на сайте fareez.info 17 июня 2016 г.