Um fluxo móvel de seleção de endereço criado com Vant 4: variáveis CSS reais, identidade de endereço controlada, validação de campos, alternância de tema e salvamento explicitamente apenas local.
Variáveis CSS do Vant 4.10.2, lidas da folha de estilos base instalada. A prévia aplica uma substituição original da cor primária teal por meio de ConfigProvider; as funções padrão abaixo permanecem identificadas explicitamente.
Componentes móveis do sistema de design Vant com funções de CSS explícitas
Componentes móveis com funções de CSS explícitas
Vant é voltado a interfaces web móveis com Vue. AddressList, Field e CellGroup oferecem linhas compactas de endereço de recebimento e campos de formulário, em vez de uma tabela administrativa para desktop. O fluxo do kit de amostras usa esses componentes nativos e exibe o destino selecionado em um resumo separado.
Por padrão, a função primária é azul por meio de --van-primary-color. Sucesso, perigo e aviso usam variáveis de cor distintas. O exemplo altera intencionalmente a cor primária para #176b77 por meio de ConfigProvider; não apresenta esse tom teal como uma cor oficial da marca Vant. A arte original com textura de papel é decorativa e não representa o estado de nenhum controle.
Sistema de design Vant: escala de espaçamento de quatro pixels e tipografia compacta
Escala de espaçamento de quatro pixels e tipografia compacta
Vant oferece valores de espaçamento de 4, 8, 12, 16, 24 e 32 pixels. Essas são variáveis base reais, não valores inferidos de uma captura de tela. Os itens da lista de endereços usam o token de espaçamento pequeno, enquanto a prévia ao redor acrescenta espaços maiores entre as seções para distinguir o formulário do resumo do pedido.
Os tamanhos de texto nomeados vão de 10 a 16 pixels, com alturas de linha correspondentes de 14 a 22 pixels. O texto do endereço tem uma variável de componente própria de 13px. Um produto para dispositivos móveis pode precisar de texto editorial maior do que esses padrões de controle: o título de exemplo tem tamanho original de 32px, reduzido para 27px no breakpoint da página.
Sistema de design Vant: o ID do endereço controla a seleção do botão de opção
O ID do endereço controla a seleção do botão de opção
AddressList recebe uma lista de registros com id, name, tel, address e isDefault opcional. O valor de v-model identifica o registro escolhido. O resumo é calculado localizando esse ID na lista atual, para que a edição do destinatário atualize o destino exibido imediatamente, sem criar um segundo estado de resumo independente.
O armazém indisponível é passado por disabled-list e recebe uma explicação clara no texto de estado desativado. Ele permanece visível para contextualizar, mas não pode ser selecionado como destino. O selo Default indica o status padrão do registro; é independente da seleção atual e não muda quando outra opção de botão de opção é escolhida.
Sistema de design Vant: mantenha o rascunho separado do registro salvo
Mantenha o rascunho separado do registro salvo
O evento de edição fornece o registro do endereço. O editor copia apenas os campos editáveis para um rascunho reativo e armazena o ID estável separadamente. Cancelar oculta esse rascunho sem modificar o endereço salvo. Salvar substitui o registro correspondente ou adiciona um novo registro local e, em seguida, seleciona esse ID.
O exemplo exibe a edição em linha, abaixo da lista, em vez de abrir uma janela pop-up na parte inferior. Assim, o exemplo completo continua utilizável em um documento incorporado. Vant também oferece AddressEdit para padronizar a entrada de endereços; este exemplo usa Form e Field porque os endereços de amostra evitam deliberadamente pressupor os dados administrativos de uma região específica.
Selecione um estúdio e confira o resumo antes de abrir a edição.
Altere o destinatário e depois cancele para confirmar que a linha salva não mudou.
Abra o editor novamente, salve campos válidos e confira o resumo selecionado.
Sistema de design Vant: regras do Field controlam o evento de envio
Regras do Field controlam o evento de envio
O Form usa validate-trigger="onSubmit". O validador do destinatário remove espaços em branco no início e no fim e exige pelo menos dois caracteres. O validador do telefone aceita uma faixa moderada de dígitos, espaços, parênteses e hífens, com um sinal de mais opcional no início. O validador do endereço exige dez caracteres que não sejam espaços em branco. Essas verificações demonstram o funcionamento; não são uma validação postal nem uma validação universal de números de telefone.
Um Button primário com native-type="submit" envia o formulário nativo. Vant emite submit somente depois que as regras são aprovadas. Os erros aparecem ao lado do Field correspondente, e scroll-to-error leva o campo inválido para a área visível. A prévia também move o foco para o primeiro campo de destinatário ao iniciar a edição. O rascunho é preservado quando a validação falha.
Sistema de design Vant: ConfigProvider mapeia valores CamelCase para variáveis CSS
ConfigProvider mapeia valores CamelCase para variáveis CSS
O objeto theme-vars inclui primaryColor, buttonPrimaryBackground, buttonPrimaryBorderColor e addressListPadding. ConfigProvider mapeia esses nomes para as variáveis --van-* correspondentes. Neste documento isolado, o provedor usa theme-vars-scope="global" para que os aliases declarados na raiz sejam resolvidos em função da função primária alterada. A substituição da função e dos dois valores do botão primário mantém coordenadas a ação nativa e a seleção do botão de opção.
Alternar a propriedade theme entre light e dark atualiza o tema dos componentes de Vant. A página ainda precisa de declarações próprias de fundo e texto que usem as variáveis de tema; definir o provedor, por si só, não aplica estilos a todos os elementos da aplicação. As amostras decorativas de papel mantêm intencionalmente as cores do material nos dois temas.
Sistema de design Vant: uma ação móvel fixa exige uma decisão de incorporação
Uma ação móvel fixa exige uma decisão de incorporação
Por padrão, AddressList reserva oitenta pixels de espaçamento inferior para o botão fixo de adicionar. A prévia define show-add-button como false e apresenta um Button comum no fluxo do documento. Também altera addressListPadding para doze pixels, evitando tanto uma ação fixa sem contexto quanto uma área vazia e inexplicável na parte inferior do exemplo incorporado.
Em telas largas, a lista e o resumo dos materiais formam duas colunas. Abaixo do breakpoint original de 680px, elas ficam empilhadas. A altura nativa de AddressList, definida como 100%, é explicitamente redefinida para auto para que o painel acompanhe seu conteúdo, em vez de se sobrepor à próxima linha da grade. Não se usa uma altura mínima global da área de visualização, permitindo que a página principal dimensione o documento incorporado conforme o conteúdo. Os nomes dos endereços quebram em linhas em telas estreitas, em vez de ampliar a página.
Sistema de design Vant: foco visível e resultados locais explícitos
Foco visível e resultados locais explícitos
A redefinição base de Vant remove os contornos de foco padrão. A folha de estilos da página restaura um anel de foco de três pixels, visível ao navegar por teclado, em botões, campos de entrada, áreas de texto e controles com tab-index. Esse acréscimo é feito no nível da aplicação; não significa que a importação de uma biblioteca, por si só, conclua o trabalho de acessibilidade. O seletor de tema tem um nome acessível e um rótulo visível.
Uma notificação de status registra um salvamento local ou a seleção de um destino. Ela informa explicitamente que nenhuma entrega foi agendada. O exemplo não tem endpoint de checkout, armazenamento nem efeitos externos. Um checkout real precisaria validar o endereço no servidor, verificar a elegibilidade para entrega e apresentar uma revisão final antes da compra.
Mantenha uma explicação visível para endereços indisponíveis, em vez de removê-los sem aviso.
Preserve o rascunho após um envio inválido para que a pessoa possa corrigir um campo.
Descreva se uma ação altera a seleção local ou realmente agenda uma entrega.
Sistema de design Vant: importe a localidade e os estilos do componente
Importe a localidade e os estilos do componente
O SFC completo importa seus componentes localmente. O arquivo de entrada instala o locale em inglês por meio de Locale.use e importa vant/lib/index.css antes da folha de estilos do layout original. O pacote verificado é Vant 4.10.2 com Vue 3; o sufixo .mjs da importação do locale em inglês corresponde ao arquivo ESM instalado.
A prévia independente incorpora seu JavaScript, CSS e a fonte de ícones ao documento. Após preservar a fonte WOFF2 incorporada, ela remove a alternativa WOFF remota não utilizada, para que o exemplo não dependa de uma solicitação de fonte a terceiros. Aplicações de produção devem usar seu próprio empacotador e suas próprias políticas de recursos, em vez de copiar uma URL de demonstração hospedada.
A geometria dos componentes vem de Vant; o breakpoint de 680px da página é uma escolha da aplicação.
A prévia restaura um anel de foco visível, pois a redefinição base remove os contornos padrão.
04
Configuração do agente do sistema de design Vant
Ponto de partida para implementação
Verificado com Vue 3 e Vant 4.10.2. O exemplo não armazena endereços fora do estado em memória.
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
Um prompt para seu projeto
Prompt para agente de IA
Comece pelo seletor de endereços do sample-kit Vant 4.10.2. Preserve o AddressList nativo e o fluxo de edição com Form/Field para adicionar ou modificar um endereço local, incluindo a validação dos campos e o estado do endereço selecionado. Mantenha a configuração de Locale, o módulo en-US, o escopo do tema ConfigProvider e a adaptação do AddressList à altura do conteúdo. Cancelar não deve substituir um endereço existente; após a validação bem-sucedida, atualize apenas a coleção local de endereços. Não afirme que este exemplo, focado apenas em endereços, confirma pagamentos ou horários de entrega.
05
Fontes e escopo do sistema de design Vant
Vant 4.10.2. Os tokens padrão e as escolhas originais da página são identificados separadamente. Os endereços de exemplo são fictícios; a seleção e a edição permanecem locais.
