Le framework Vue3 Vite fait référence aux méthodes des composants vants et aux méthodes de résolution de problèmes associées

Framework projet : vite + TS + vant4 (syntaxe Vue3 utilisée par vite)

Remarque : Ce projet utilise Vue3 et Vant4. Si vous utilisez Vue2, vous devez utiliser Vant2. Il existe des documents officiels qui peuvent être consultés et utilisés

Adresse du document officiel Vant4 : https://vant-contrib.gitee.io/vant/#/zh-CN

Installation avant

Il peut être installé via npm dans le projet. La commande d'installation est la suivante :

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

Vant importe à la demande - - - Installez le plugin "unplugin-vue-components"

Si vous utilisez Vant dans Vite, vous pouvez utiliser le plug-in "unplugin-vue-components". Ce plug-in peut importer les composants Vant utilisés selon vos besoins. Lorsque vous utilisez des composants Vant, vous pouvez les utiliser directement dans le modèle de modèle, au lieu de les importer manuellement dans le script ts.

1. Installez la méthode du plug-in :

# 通过 npm 安装
npm i unplugin-vue-components -D

2. Configurez le plug-in : vite.config.ts

Ajoutez la configuration du plugin "unplugin-vue-components" dans le fichier vite.config.ts :

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import {
    
     VantResolver } from 'unplugin-vue-components/resolvers';

export default {
    
    
  plugins: [
    vue(),
    Components({
    
    
      resolvers: [VantResolver()],
    }),
  ],
};

3. Utilisation des composants

Exemple:

<template>
  <van-field class="van-input" v-model="mobile" type="tel" placeholder="请输入手机号" clearable maxlength="11" />
</template>

4. Précautions d'utilisation des composants fonctionnels

Les composants Toast, Dialog, Notify et ImagePreview dans Vant sont des composants fonctionnels, qui doivent être importés avant d'être utilisés, et les styles de composants doivent être introduits, par exemple :

<script setup lang="ts">
import {
    
     showToast } from 'vant';

showToast('请填写正确的手机号');

</script>

Introduisez les styles de composants dans mian.ts :

import 'vant/es/toast/style';

Autres exemples de références de composants fonctionnels :

// Dialog
import {
    
     showDialog } from 'vant';
import 'vant/es/dialog/style';

// Notify
import {
    
     showNotify } from 'vant';
import 'vant/es/notify/style';

// ImagePreview
import {
    
     showImagePreview } from 'vant';
import 'vant/es/image-preview/style';

Solution aux problèmes liés au style de composant Vant

1. Modifiez la méthode de style du composant vant :

Après avoir cité le composant, ouvrez la fenêtre de débogage dans le navigateur, recherchez l'élément de composant correspondant au style à modifier et vérifiez le nom de classe de l'élément de composant. Parfois, le style de réécriture du nom de classe ne prend pas effet. Il peut être que le poids n'est pas suffisant. Superposer le
nom de la classe ou ajouter "! important"

Exemple:

.van-cell {
    
    
  font-size: 28px!important;
  background: transparent!important;
}

2. Il est difficile de cliquer sur le composant de formulaire de vant pour effacer le composant, souvent cliquer dessus n'a aucun effet d'effacement

Il peut être couvert. Définissez la marge droite du formulaire pour qu'elle soit supérieure à la largeur de l'icône d'effacement :

Exemple:

.van-field__control {
    
    
  margin-right: 15px!important;
}

3. Le bouton d'effacement du formulaire Vant échoue du côté PC

①Installer le module
npm i @vant/touch-emulator -S
②Introduire le module dans le fichier "main.ts" et prendre automatiquement effet
import '@vant/touch-emulator';

S'il ne prend pas effet immédiatement après l'introduction de l'installation, vous pouvez redémarrer le projet et vérifier l'effet

Consultez la documentation de Vant pour savoir que vant est destiné au terminal mobile et que certains composants du terminal PC peuvent échouer. Vous pouvez installer le module "vant/touch-emulator" pour résoudre ce problème.

Vant a la version Vue 2, la version Vue 3, la version applet WeChat, la version React, la version applet Alipay.

Pour en savoir plus sur le premier passage de Vant, veuillez vous référer au document officiel de Vant ~