Вант ( \ˈvænt\ )Это библиотека компонентов Vue, реализованная фронтенд-командой Youzan на основе единой спецификации Youzan, предоставляющая полный набор базовых компонентов пользовательского интерфейса и бизнес-компонентов. С помощью Vant вы можете быстро создавать страницы с единым стилем и повышать эффективность разработки. В настоящее время насчитывается около 50 компонентов, которые широко используются в различных мобильных сервисах Youzan. Мы будем продолжать совершенствоваться на этой основе и разрабатывать более практичные компоненты.
Наша цель — быстрее и проще разрабатывать красивые и простые в использовании мобильные сайты на основе Vue. Если вам нужно разработать мобильный магазин, Vant отлично подойдет.
1. Характеристики
- Все компоненты получены из микроторгового центра Youzan и были протестированы бизнесом Youzan, что делает их более надежными.
- полный и подробныйкитайский документ
- Специальная команда дизайнеров поддерживает визуальные нормы, единообразие и элегантность.
- служба поддержкиbabel-plugin-import
- Показатель охвата одним тестом превышает 90%
Рекомендуется использовать Vant с webpack и babel, чтобы вы могли использовать богатые плагины и персонализированную конфигурацию, предоставляемые webpack. Вант поддерживаетbabel-plugin-import, использование Vant через плагин babel может оптимизировать размер кода и повысить производительность внешнего интерфейса.
Вант предоставляет подробную документацию с подробными описаниями и примерами кода для каждой функциональной точки каждого компонента. Если вам нужно использовать соответствующую функцию, вы можете напрямую скопировать код в документ.
Конечно, это делает Vant отличным компонентом пользовательского интерфейса Vue. Итак, каковы преимущества Vant по сравнению с другими библиотеками компонентов пользовательского интерфейса Vue?
2. Богатые и практичные бизнес-компоненты
Vant не только предоставляет базовые компоненты пользовательского интерфейса, чтобы помочь разработчикам быстро построить мобильный торговый центр, Vant добавил множество бизнес-компонентов, обычно используемых в мобильных торговых центрах. похожий навыбор артикула,Выбор купона,Выбор провинции, города и округаЖдать.
Vant продолжит обогащать бизнес-компоненты в будущем. Как видно из приведенной ниже неполной схемы планирования, мы организуем компоненты, подходящие для различных бизнес-сценариев, и постепенно усовершенствуем их в большую систему компонентов торгового центра электронной коммерции. Большинство перечисленных компонентов уже разобраны и будут добавлены в Vant в ближайшее время.
1. Компоненты выбора SKU
На странице продукта обычным бизнес-сценарием является выбор спецификаций продукта для покупки. Товары могут иметь многоуровневые и различные типы SKU.Учитывая общие функции, такие как ограничение покупки, отображение инвентаря, сообщение о покупке и соответствующие отображаемые изображения SKU, весь процесс выбора спецификации продукта станет очень сложным. Компонент Sku, предоставляемый Vant, может соответствовать всем вышеперечисленным требованиям после передачи указанных данных.
В обычном процессе покупки выбор количества поддерживает изменение количества покупки только нажатием кнопки «плюс» или «минус». Однако в сценарии, требующем большого количества покупок, пользователям удобнее вручную вводить количество покупок.Мы поддерживаем пользователей, которые могут напрямую вводить число для количества покупок компонента Sku. В то же время, когда пользователь вводит данные, он автоматически определяет, можно ли совершить покупку в соответствии с ограниченным количеством покупки, и корректирует количество покупки.
Что касается сообщения о продукте, компонент Sku обеспечивает различные формы поддержки сообщений о продукте, включая удостоверение личности, текст, телефон, дату, время и электронную почту. Поддержка отображения и проверки необходимых сообщений продукта.
2. Выбор провинции, города и округа
Vant предоставляет общую функцию выбора провинции, города и округа, которая может отображаться после импорта данных списка провинций, городов и округов в указанном формате данных. Area поддерживает метод выбора с менее чем тремя столбцами. Параметр columnsNum может указывать количество столбцов, которые Area должен отображать. В особых случаях необходимо выбрать только провинцию или провинцию и город.
Область обеспечивает отмену и подтверждение событий извне. Прослушивая это событие в коде, разработчик может зафиксировать операцию пользователя и обработать ее соответствующим образом.
3. Выбор купона купона
Селектор купонов предоставляет ячейки купонов и функции выбора купонов.
Ячейка купона просто должна передать список купонов и текущий используемый купон для правильного отображения. Используйте редактируемый параметр, чтобы контролировать, отображается ли в ячейке купона стрелка вправо, которую можно использовать, чтобы напомнить пользователю, можно ли переключать купон.
Модуль выбора купона имеет больше функций. Опция купона поддерживает функцию погашения кода купона.После того, как пользователь введет код купона и нажмет на погашение, будет запущено событие обмена. Разработчики могут прослушивать это событие в коде и реализовывать свой собственный код купона. В то же время список выбора купонов поддерживает отображение доступных и недоступных купонов, а отображение различных состояний купонов более удобно для пользователя.
В ближайшем будущем селектор купонов позволит разработчикам свободно заменять способ отображения каждого купона в списке выбора купонов.
Далее: Выбор адреса Адрес крупного компонента
В ближайшее время мы выпустим компонент выбора адреса, чтобы улучшить функции управления адресами компонента Vant.
Demo
Ниже представлен торговый центр на базе Vant. демо, полный процесс покупки, сгенерированный данными через mock. С льготными акциями и интерфейсом управления пользователями простой покупательский центр завершен.
3. Перспективы
VantЕсть еще много недостатков. Бизнес-компоненты только запущены и несовершенны, и в Vant необходимо добавить больше бизнес-компонентов. Отсутствие англоязычной документации и поддержки потока/машинописи. С нетерпением ждем критики и предложений от всех, чтобы вместе построить лучший Vant.
Пожалуйста, перейдите к полному кодуgithub, перейдите к руководству пользователяСайт документации.
Эта статья была впервые опубликована вБлог о технологиях Youzan.