Кроссплатформенный и мобильный интерфейс · Новый ресурс
Дизайн-система Vant.
Мобильный сценарий выбора адреса на основе Vant 4: настоящие переменные CSS, управляемая идентификация адреса, проверка полей, переключение темы и явное сохранение только локально.
Нативный Vant 4.10.2 с Vue 3. Оформление бумаги и окружающий макет созданы специально для примера. · Справочник по реализации
02
Справочник по дизайну дизайн-системы Vant
Переменные Vant 4.10.2 CSS считываются из установленной базовой таблицы стилей. В предпросмотре через ConfigProvider применяется оригинальное переопределение основного цвета на бирюзовый; роли по умолчанию ниже помечены отдельно.
Мобильные компоненты дизайн-системы Vant с явно заданными ролями CSS
Мобильные компоненты с явно заданными ролями CSS
Vant предназначена для мобильных веб-интерфейсов на Vue. Компоненты AddressList, Field и CellGroup позволяют создавать компактные строки с адресами доставки и ячейки формы вместо настольной административной таблицы. В сценарии с набором для образцов используются эти нативные компоненты, а выбранный адрес назначения отображается в отдельной сводке.
Для основной роли по умолчанию используется синий цвет, заданный через --van-primary-color. Для успеха, опасности и предупреждения предусмотрены отдельные переменные цвета. В примере основной цвет намеренно изменён на #176b77 через ConfigProvider; этот бирюзовый цвет не обозначен как официальный цвет бренда Vant. Оригинальное оформление бумаги носит декоративный характер и не отражает состояние элементов управления.
Четырёхпиксельная шкала внутренних отступов и компактная типографика в дизайн-системе Vant
Четырёхпиксельная шкала внутренних отступов и компактная типографика
Vant предоставляет значения внутренних отступов 4, 8, 12, 16, 24 и 32 пикселя. Это реальные базовые переменные, а не значения, выведенные по скриншоту. В элементах списка адресов используется токен небольшого отступа, а в окружающем макете предпросмотра предусмотрены более крупные промежутки между разделами, чтобы отделить форму от сводки заказа.
Указанные размеры текста — от 10 до 16 пикселей, соответствующая высота строки — от 14 до 22 пикселей. Для текста адреса предусмотрена отдельная переменная компонента размером 13px. В мобильном продукте для основного текста может потребоваться размер больше этих значений по умолчанию для элементов управления: заголовок примера — оригинальный размер 32px, уменьшенный до 27px на контрольной точке страницы.
Выбор переключателя определяется идентификатором адреса в дизайн-системе Vant
Выбор переключателя определяется идентификатором адреса
AddressList получает записи с полями id, name, tel, address и необязательным isDefault. Значение v-model указывает на выбранную запись. Сводка формируется поиском этой записи по ID в текущем списке, поэтому после изменения получателя отображаемый адрес назначения обновляется сразу, без отдельного независимого состояния сводки.
Недоступный склад передаётся через disabled-list и снабжается понятным пояснением disabled-text. Он остаётся видимым для контекста, но выбрать его как адрес назначения нельзя. Метка Default указывает на то, что запись является адресом по умолчанию; она не зависит от текущего выбора и не меняется при выборе другого варианта переключателя.
Храните черновик отдельно от сохранённой записи в дизайн-системе Vant
Храните черновик отдельно от сохранённой записи
Событие редактирования передаёт запись адреса. Редактор копирует в реактивный черновик только редактируемые поля, а стабильный идентификатор хранит отдельно. При отмене черновик скрывается, не изменяя сохранённый адрес. При сохранении заменяется соответствующая запись или добавляется новая локальная запись, после чего выбирается её идентификатор.
В этом примере редактор отображается под списком, а не во всплывающем окне внизу экрана. Так пример остаётся удобным для использования во встроенном документе. В Vant также есть компонент AddressEdit для стандартизированного ввода адреса; здесь используются Form и Field, поскольку для примеров адресов намеренно не предполагаются данные об административных единицах какой-либо конкретной страны.
Выберите студию и проверьте сводку, прежде чем открывать Edit.
Измените получателя, затем отмените изменения и убедитесь, что сохранённая строка осталась прежней.
Снова откройте редактор, сохраните корректные данные и проверьте выбранную сводку.
Правила Field управляют отправкой события submit в дизайн-системе Vant
Правила Field управляют отправкой события submit
В Form задано validate-trigger="onSubmit". Валидатор получателя удаляет пробелы в начале и конце и требует не менее двух символов. Валидатор телефона допускает ограниченный набор цифр, пробелов, скобок и дефисов, а также необязательный знак плюса в начале. Валидатор адреса требует не менее десяти символов, не являющихся пробелами. Эти проверки демонстрируют работу механизма и не являются проверкой почтового адреса или универсальной валидацией телефонных номеров.
Основная кнопка Button с атрибутом native-type="submit" отправляет нативную форму. Vant вызывает событие submit только после успешного прохождения правил. Ошибки отображаются рядом с соответствующим Field, а scroll-to-error прокручивает страницу к полю с ошибкой. При начале редактирования предпросмотр также переводит фокус на первое поле получателя. При ошибках валидации черновик сохраняется.
ConfigProvider сопоставляет значения в CamelCase с переменными CSS в дизайн-системе Vant
ConfigProvider сопоставляет значения в CamelCase с переменными CSS
Объект theme-vars включает значения primaryColor, buttonPrimaryBackground, buttonPrimaryBorderColor и addressListPadding. ConfigProvider сопоставляет эти имена с соответствующими переменными --van-*. В этом изолированном документе используется theme-vars-scope="global", чтобы псевдонимы, объявленные в корне, соответствовали изменённой основной роли. Переопределение роли и обоих значений основной кнопки позволяет согласованно настроить нативное действие и выбор переключателя.
При переключении свойства theme между light и dark обновляется тема компонентов Vant. Для страницы по-прежнему нужны собственные объявления фона и текста с использованием переменных темы: одна настройка провайдера не задаёт оформление для каждого элемента приложения. Декоративные образцы бумаги намеренно сохраняют свои цвета материала в обеих темах.
Vant — дизайн-система: для фиксированного мобильного действия нужно выбрать способ встраивания
Для фиксированного мобильного действия нужно выбрать способ встраивания
AddressList обычно резервирует восемьдесят пикселей нижнего отступа для фиксированной кнопки добавления. В предварительном просмотре свойство show-add-button установлено в false, а вместо него используется обычная кнопка Button в потоке документа. Значение addressListPadding также изменено на двенадцать пикселей — так во встроенном примере не остаётся ни отдельно висящего фиксированного действия, ни необъяснимой пустой области внизу.
На широком экране список и сводка по материалам размещаются в двух колонках. При ширине менее исходной контрольной точки 680px они складываются в одну колонку. Встроенное значение AddressList height:100% явно сбрасывается до height:auto, чтобы панель занимала высоту по содержимому и не перекрывала следующую строку сетки. Минимальная высота области просмотра глобально не задаётся, поэтому родительская страница может подстроить размер встроенного документа по его содержимому. На узких экранах названия адресов переносятся, а не расширяют страницу.
Vant — дизайн-система: видимый фокус и явные результаты локальных действий
Видимый фокус и явные результаты локальных действий
Базовый сброс стилей Vant удаляет стандартные контуры фокуса. Сопутствующая таблица стилей страницы восстанавливает кольцо фокуса толщиной три пикселя для кнопок, полей ввода, текстовых областей и элементов с tabindex. Это дополнительная настройка на уровне приложения, а не утверждение, что одного импорта библиотеки достаточно для обеспечения доступности. У переключателя темы есть доступное имя и видимая подпись.
Уведомление о статусе сообщает о локальном сохранении или выборе адреса. В нём прямо указано, что доставка не оформлена. В примере нет конечной точки оформления заказа, хранилища или внешних побочных эффектов. Для настоящего оформления заказа потребуются серверная проверка адреса, проверка возможности доставки и итоговое подтверждение перед покупкой.
Поясняйте недоступность адресов явно, а не удаляйте их без предупреждения.
Сохраняйте черновик после отправки с ошибкой, чтобы пользователь мог исправить отдельное поле.
Уточните, меняет ли действие локальный выбор или действительно оформляет доставку.
Vant — дизайн-система: импорт локали и стилей компонентов
Импортируйте локаль и стили компонентов
Полный SFC локально импортирует свои компоненты. Входной файл подключает английскую локаль через Locale.use и импортирует vant/lib/index.css перед исходной таблицей стилей макета. Проверенная версия пакета — Vant 4.10.2 для Vue 3; суффикс .mjs в импорте английской локали соответствует установленному ESM-файлу.
В автономном предварительном просмотре JavaScript, CSS и шрифт значков встроены в документ. Неиспользуемый удалённый резервный шрифт WOFF удалён после сохранения встроенного шрифта WOFF2, поэтому пример не зависит от запроса к стороннему шрифту. В рабочих приложениях используйте собственный сборщик и правила работы с ресурсами, а не копируйте URL размещённого демонстрационного файла.
Геометрия компонентов определяется Vant; контрольная точка страницы 680px выбрана для приложения.
В предварительном просмотре восстанавливается видимое кольцо фокуса, поскольку базовый сброс стилей удаляет стандартные контуры.
04
Vant — настройка дизайн-системы агента
Отправная точка для реализации
Проверено на Vue 3 и Vant 4.10.2. Пример не сохраняет адреса вне состояния в оперативной памяти.
javascript
// Create the project first:
// npm create vite@latest vant-specimen -- --template vue
// cd vant-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected]
// Save the complete SFC as App.vue and the supplied layout as style.css.
import {createApp} from 'vue';
import {Locale} from 'vant';
import enUS from 'vant/es/locale/lang/en-US.mjs';
import 'vant/lib/index.css';
import './style.css';
import App from './App.vue';
Locale.use('en-US',enUS);
createApp(App).mount('#app');
// index.html must contain <div id="app"></div>.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
Запрос для вашего проекта
Промпт для AI-агента
Возьмите за основу адресный селектор sample-kit для Vant 4.10.2. Сохраните стандартный AddressList и сценарий редактирования через Form/Field для добавления или изменения локального адреса, включая проверку полей и состояние выбранного адреса. Оставьте настройку Locale, модуль en-US, область действия темы ConfigProvider и адаптацию AddressList по высоте содержимого. Отмена не должна заменять существующий адрес; успешная проверка должна обновлять только локальную коллекцию адресов. Не добавляйте к этому примеру, посвящённому только адресам, утверждения об успешной оплате или выборе интервала доставки.
05
Vant — дизайн-система: источники и область применения
Vant 4.10.2. Токены по умолчанию и исходные решения для страницы обозначены отдельно. Примеры адресов вымышлены; выбор и редактирование выполняются локально.
