Cube-UIВ последнее время было сделано много обновлений, а также много новых функций, а также включает в себя множество компонентов, которые обычно используются на мобильной стороне:
- Toolbar
- TabBar
- Checker
- ImagePreview
- Sticky
- ScrollNavBar
- ScrollNav
- RecycleList
Модуль:
- Интернационализация локали
- create-api разделен на отдельные пакеты NPMvue-create-api
Toolbar
Панель инструментов является часто используемой панелью инструментов, и каждая опция может иметь независимое поведение.Кроме того, учитывая сценарии, когда ширины мобильного терминала недостаточно, она также поддерживает больше режимов, и некоторые операции с недостаточным приоритетом могут быть размещены в большем количестве.
Для более подробной информации, пожалуйста, перейдитеофициальная документация.
TabBar
TabBar может быть независимой коллекцией вкладок, отвечающей текущей выбранной вкладке. Конечно, если есть более ответственные требования к макету, он также может поддерживать использование слотов.
Конечно, нам часто приходится использовать его в сочетании с TabBarPanels, например, в следующих сценариях:
Таким образом, может быть достигнут эффект связи между верхней вкладкой и нижними панелями.
Благодаря гибким возможностям TabBar его также можно использовать в сочетании с Slide and Scroll для достижения следующих очень распространенных интерактивных эффектов (горизонтальное перемещение для переключения Tab):
Конечно, в сценарии электронной коммерции потребность в ScrollTab возникает легко, и нужно только совместить TabBar и Scroll:
Для более подробной информации, пожалуйста, перейдитеофициальная документация.
Checker
Checker — более гибкий компонент выбора, который может настроить нужный стиль макета.
Будет полезнее в кастомной сцене выбора, детали перенесеныофициальная документация.
ImagePreview
Предварительный просмотр изображения, общий компонент, поддерживает масштабирование, двойной щелчок, чтобы увеличить (уменьшить масштаб) изображение.
В специальных сценариях вы все равно можете использовать слоты для удовлетворения потребностей вашего бизнеса:
Подробности можно посмотретьофициальная документация.
Sticky
Компонент адсорбции является очень мощным компонентом.Его можно использовать не только в сочетании с компонентом прокрутки, но также можно сочетать с собственным эффектом прокрутки для достижения различных эффектов адсорбции.Он может не только достичь однократной адсорбции, но и реализовать несколько последовательных адсорбций.Самый простой Эффект адсорбции аналогичен эффекту индексного списка IndexList.
Конечно, есть также некоторые уникальные сцены, такие как эффект WeChat Moments, на этот раз может быть задействован эффект «градиентного» поглощения.В процессе прокрутки стиль будет меняться вместе с прокруткой.
Подробности можно найти наофициальная документацияПроверить.
ScrollNavBar
Прокручивая компонент навигационной панели, этот эффект очень похож на эффект существующего верхнего руководства Didi Passenger WebApp, конечно, вы также можете изменить удобство на вертикальный режим через Prop:
Когда элемент выбран, он будет автоматически рассчитан и прокручен в центральное положение, а детали будут перемещеныофициальная документация.
ScrollNav
Компонент навигации с прокруткой, который обычно используется в сценариях еды на вынос или в сценариях электронной коммерции, автоматически достигает эффекта ассоциации позиционирования. Сам этот компонент является комбинированным компонентом, использующим вышеупомянутые комбинированные компоненты Sticky и ScrollNavBar.
Существует также вертикальный эффект, который встречается чаще:
Кому интересно, могут посмотретьофициальная документация.
RecycleList
Перерабатываемый прокручиваемый список, полезный при работе со списками с большим количеством контента, режим по умолчанию — бесконечная прокрутка, чтобы загрузить больше:
Конечно, в соответствии с реальной сценой у нас может быть другой режим, такой как режим бесконечной прокрутки, который требует наличия элементов надгробия для заполнения элементов списка без данных Эффект следующий:
Для получения более подробной информации см.официальная документация.
Locale
В последней версии мы также поддерживаем возможность интернационализации, встроенные китайские и английские языковые пакеты, разработчики могут настраивать и использовать свои собственные языковые пакеты.
В дополнение к возможностям языкового пакета по умолчанию, собственные выражения интерполяции и синтаксис фильтра Vue также упоминаются для реализации особых требований, таких как форматирование даты.
Например, настройка связанной информации в Валидаторе в китайском языковом пакете по умолчанию.
{
validator: {
// ...
min: {
array: '请选择至少 {{config}} 项',
date: '请选择 {{config | toLocaleDateString("yyyy年MM月dd日")}} 之后的时间',
}
}
}
create-api
это впредыдущая статьяОн также представлен в , в основном используется для реализации компонентов вызовов в стиле API (создание экземпляров) и обеспечивает поддержку режима «одиночного» (в том же экземпляре контекста вызова).
Теперь рассмотрим истекающие общие возможности, которые поддерживались независимо для отдельного склада,vue-create-api, подробное использование можно найти непосредственно на GitHub.Документация.
Перспектива
В настоящее времяCube-UIОн прошел через множество итераций версии, и с учетом отзывов сообщества было добавлено много новых компонентов.Оглядываясь назад, мы обнаруживаем, что на самом деле у нас есть много вещей, которые мы можем сделать лучше, поэтому мы реорганизуем и подведем итоги в ближайшее время. Будущее, а также будет впитывать, Исследуйте и исследуйте больше и лучшие решения, подготовьтесь к версии 2.0, по-прежнему предоставляйте компонент с надежным качеством, экстремальным опытом, стандартными спецификациями и сильной масштабируемостью, но он будет более мощным, простым в использовании и версия с лучшей окружающей экологией.