Tagify - это плагин JS с открытым исходным кодом, который упрощает реализацию тегов для автозаполнения выделений. Вы можете найти более подробную информацию по ссылке ниже.



Tagify - демонстрация
Преобразует ввод HTML / текстовое поле в компонент Теги yaireo.github.io



Здесь мы рассмотрим этапы реализации tagify с помощью Vue.

Шаг 1:

Создайте проект с помощью следующих команд, используя Vue CLI

Если все установлено правильно, вы сможете увидеть экран приветствия, как показано ниже, после запуска «npm run dev».

Шаг 2:

Установить tagify



@ yaireo / tagify
Преобразование поля ввода в элемент« Теги . Простой, настраиваемый, с хорошей производительностью и небольшим объемом кода. www.npmjs.com »



Запустите команду «npm i @ yaireo / tagify», и вы сможете увидеть конфигурацию в package.json, как показано ниже.

Шаг 4:

Импортируйте пакет в требуемый компонент.

Шаг 5:

Отправьте данные из белого списка во вход автозаполнения.

Напишите код JS для занесения данных в белый список внутри свойства connected, чтобы код JS выполнялся только после монтирования компонента.

Шаг 5:

Запустите код.

Шаг 6:

Выберите вариант

Примечание. Используйте CSS tagify, который может быть разветвлен из репозитория автора.



yairEO / tagify
легкий и эффективный компонент ввода тегов в Vanilla JS / React / Angular - yairEO / tagify github.com



Кредиты:

Спасибо yairEO за облегченный плагин.