Septièmement, le composant de diagramme de carrousel et l'introduction de vue-awesome-swiper

Utilisation et introduction du composant carrousel vue-awesome-swiper:

Le site officiel est présenté ici: https://surmon-china.github.io/vue-awesome-swiper/ ;

Méthode d'installation: installez vue-awesome-swiper avec npm
cmd dans le répertoire du projet, exécutez la commande: cnpm install vue-awesome-swiper --save

Ensuite, ouvrez le fichier package.json dans le répertoire du projet pour voir si la ligne rouge dans la figure ci-dessous existe, si elle existe, l'installation est réussie.

Comment l'utiliser: Il existe de nombreuses façons de l'utiliser sur GitHub. La principale chose à utiliser dans le projet vue est de sélectionner tout ou partie des composants. Ici, nous choisissons le second:

①Introduisez-le dans le projet, créez le composant carousel.vue dans le répertoire des composants, puis importez-le:

La structure html du carrousel:

Copiez-le et collez-le dans le <template> </template> du composant carousel.vue et apportez les modifications, comme illustré dans la figure:

templateLa structure supprime la flèche droite et la flèche gauche. (Placez le fichier image du carrousel sous le dossier statique, <img> définissez src)

Enfin, utilisez la méthode SPA pour définir les paramètres du script, les instructions github:


(Définissez les paramètres dans la ligne rouge, copiez et collez les autres inchangés)

Les paramètres du script ajoutent des paramètres de pagination et des paramètres de rotation automatique. Les paramètres officiels de l'API de swiper sont les mêmes ( http://www.swiper.com.cn/api/index2.html )

après avoir fini:

Ensuite, définissez la zone de rotation css et la taille de l'image:



À ce stade, le composant du carrousel carousel.vue est prêt, allez maintenant l'utiliser.

-------------------------------------------------- ------------------------------------------------

Créez un nouveau composant home.vue sous le dossier view, et introduisez le composant head précédemment créé myHeadr.vue dans ce composant ,

Introduisez ensuite le composant image du carrousel, à ce moment le composant home = composant principal + prix du groupe d'images du carrousel.

Ici, la maison des composants est prête.

-------------------------------------------------- -----------------------------------------------

Enfin, référencez le composant home.vue dans App.vue, la méthode est la même que ci-dessus, commencez par introduire, enregistrer et appeler.

Puis configurez le routage dans index.js sous le dossier du routeur:

L'effet de la course:


-------------------------------------------------- -------------------------------------------------- ---

Pour résumer:

① Créez le composant de tête, puis créez le composant de diagramme de carrousel.

②Créez un composant d'origine et référencez deux composants dans le composant. À ce stade, le composant d'origine = composant principal + composant carrousel.

③Appelez enfin le composant home dans App.vue


Je suppose que tu aimes

Origine blog.csdn.net/li__po/article/details/80523969
conseillé
Classement