Плохо оформленная форма может отпугнуть посетителей с вашего сайта. К счастью для разработчиков Vue, доступно множество библиотек ввода Vue, которые упростят настройку ваших форм.
У интуитивно понятной и удобной формы есть несколько преимуществ, в том числе
- Более высокий коэффициент конверсии
- Лучший пользовательский опыт
- Более профессиональный брендинг
Как и любой другой крупный фреймворк, существует множество решений сообщества для создания красивых форм Vue.js. От простого ввода текста до расширенных шаблонов номеров телефонов - существует множество вариантов для ваших форм.
Вот некоторые из моих любимых библиотек ввода Vue. Хотя этот список касается только элементов формы, я также составил список библиотек значков Vue.
Надеюсь, вы найдете эти инструменты такими же полезными, как и я!
1. Vue Select
Работа с <select> элементами - огромная часть любой формы. Но если у вас есть опыт в этом, вы будете знать, что их очень сложно настроить.
К счастью, библиотека Vue Select Джеффа Сагала предоставляет интуитивно понятный способ добавления таких функций, как
Он прост в использовании, и я определенно использовал его в нескольких проектах.
2. Тег ввода Vue
Разрешить посетителям сайта добавлять свои собственные теги - это обычная функция, которая нужна формам. Однако реализация собственной гибкой системы может быть сложной задачей - особенно для людей, плохо знакомых с Vue.
Библиотека Vue Input Tag - отличный способ добавить мощную функцию в ваши формы.
3. Выпадающие списки Vue
Vue Dropdowns - еще одна библиотека, которая обрабатывает <select> элементов. Он не только создает удобные входы, но также предоставляет отличный способ установки данных и прослушивания таких событий, как change и blur.
Благодаря простой настройке это определенно отличный способ сделать ваши формы красивее с минимальными усилиями.
4. Цвет Vue
Vue Color - это простой способ добавить выбор цвета в ваши формы. Реализация одной из этих систем с нуля требует часов планирования и работы, но использование Vue Color занимает всего несколько минут.
Эта библиотека также отличается широкими возможностями настройки.
Он поставляется с несколькими разными стилями, обработчиками событий и поддержкой разных цветовых форматов. Я определенно рекомендую Vue Color для добавления настраиваемости на следующем уровне в ваше приложение.
5. Выбор даты VueJS
VueJS Date Picker - одна из самых чистых библиотек для выбора даты, которую я когда-либо видел. Это дает вам представление календаря, которое позволяет пользователям щелкать мышью, чтобы выбрать дату.
На мой взгляд, он выглядит очень профессионально, а также очень настраиваемый. Фактически, у него есть десятки легко редактируемых свойств и событий, которые идеально подходят для вашего варианта использования. Однако я думаю, что настройка по умолчанию также отлично подходит для большинства проектов.
Но не верьте мне на слово, посмотрите этот снимок экрана из демонстрации Vue DatePicker.
6. Переключатели Vue
Переключение входов - прекрасный способ создавать переключаемые параметры - они гладкие, интуитивно понятные и могут быть изменены в соответствии со стилем практически любого приложения.
Vue Switches - потрясающая библиотека для создания красивых входов переключателей. Благодаря разнообразию тем и возможности настраивать цвета и текст, это гибкое решение для ваших форм.
7. Vue Dropzone
Vue Dropzone - это библиотека для загрузки файлов методом перетаскивания. В последние несколько лет загрузка файлов методом перетаскивания стала более распространенной, и это простой способ сделать ваше приложение современным.
Vue Dropzone предоставляет десятки настраиваемых атрибутов и событий, которые позволяют вам настраивать его функциональность для ваших конкретных проектов. Но независимо от того, решите вы его изменить или нет, это простой, но мощный инструмент, который можно добавить в ваши формы.
8. Ползунки Vue Circle.
Слайдеры Vue Circle - отличный способ добавить немного изюминки в ваши формы. В отличие от обычного линейного ползунка, ползунки с кружками могут казаться более естественными в зависимости от значений, которые вы собираете.
Мне нравится эта библиотека, потому что она очень универсальна. Он поддерживает сенсорное управление, позволяет устанавливать максимальные / минимальные значения и даже позволяет контролировать размер шага вашего ползунка.
В целом, это действительно крутой вариант, который стоит рассмотреть, чтобы добавить больше стиля вашим приложениям Vue.
9. Номер телефона Vue
Без использования каких-либо библиотек сбор телефонных номеров может стать немного сложным. Вам придется беспокоиться о форматировании, кодах стран и т. Д.
Библиотека Vue Phone Number позаботится обо всем и поставляется с красивым пользовательским интерфейсом, который выглядит профессионально и безопасно - два фактора, которые повысят коэффициент конверсии ваших форм.
Кроме того, он чрезвычайно гибкий, и вы можете настроить несколько функций, в том числе
- Действительные коды стран
- Тема и цвета
- Форматирование номера телефона
Заключение
Хотя это ни в коем случае не полный список входных библиотек Vue, эти 9, которые я перечислил, помогли мне сэкономить так много времени при разработке проектов. Кроме того, я думаю, что все это простые способы дополнить ваши формы расширенными функциями.
Надеюсь, вы открыли для себя несколько новых инструментов, которые можно включить в свои проекты Vue.
Какие ваши любимые библиотеки ввода? Я буду рад получить известие от вас!
Первоначально опубликовано на https://learnvue.co 25 января 2020 г.
