Comment vue.js utilise le composant carrousel mint-ui

Cette fois, je vais vous montrer comment utiliser le composant carrousel mint-ui dans vue.js, comment utiliser le composant carrousel mint-ui dans vue.js Quelles sont les précautions Voici des cas concrets, jetons un oeil.

Initialiser le projet vue

npm install -g vue-cli
vue init webpack demo # 中间会让你选npm yarn 等来安装依赖，我选的是yarn，因为它快些

Installer mint-ui

yarn add mint-ui

Une fois mint-ui installé, vous devez toujours configurer babel. Suivez simplement la documentation officielle de mint-ui pour le configurer

. Ci-dessous se trouve le fichier .babelrc que j'ai configuré. Au démarrage, une erreur liée à es2015 sera signalée. Installez simplement babel-preset-es2015

{
 "presets": [
 ["env", {
  "modules": false,
  "targets": {
  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
 }],
 "stage-2",
 ["es2015", { "modules": false }]
 ],
 "plugins": [["component", [
 {
  "libraryName": "mint-ui",
  "style": true
 }
 ]],"transform-vue-jsx", "transform-runtime"],
 "env": {
 "test": {
  "presets": ["env", "stage-2", "es2015"],
  "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
 }
 }
}

. Intégration

Ouvrez la démo du projet vue créée, recherchez le fichier composants/HelloWorld.vue dans src, puis remplacez le contenu par le contenu suivant

<template>
 <p>
 <mt-swipe :auto="2000">
  <mt-swipe-item v-for="item in items" :key="item.id">
  <a :href="item.href" rel="external nofollow" >
   <img :src="item.url" class="img"/>
   <span class="desc"></span>
  </a>
  </mt-swipe-item>
 </mt-swipe>
 </p>
</template>
<script>
 import {Swipe, SwipeItem} from 'mint-ui'
 import 'mint-ui/lib/style.css'
 export default {
 components: {
  'mt-swipe': Swipe,
  'mt-swipe-item': SwipeItem
 },
 data () {
  return {
  items: [{
   title: '你的名字',
   href: 'http://google.com',   url: 'http://localhost:8080/static/img1.png'
  }, {
   title: '我的名字',
   href: 'http://baidu.com',   url: 'http://localhost:8080/static/img2.png'
  }]
  }
 }
 }
</script>
<style scoped>
 img {
 width: 100%;
 }
 .mint-swipe {
 height: 218px;
 }
 .desc {
 font-weight: 600;
 opacity: .9;
 padding: 5px;
 height: 20px;
 line-height: 20px;
 width: 100%;
 color: #fff;
 background-color: gray;
 position: absolute;
 bottom: 0;
 }
</style>

Trouvez deux images, nommées respectivement img1.png et img2.png, mettez-les dans le statique du projet de démonstration, puis démarrez le projet

npm run dev

Ouvrez le navigateur : http://localhost:8080/

Attention

1. Si vous trouvez que le texte est tout centré

Vous pouvez trouver le fichier App.vue et simplement supprimer le code CSS centré à l'intérieur

1. Si la page a remplissage

Définissez la marge du style du corps : 0 auto ;

Lorsqu'il est utilisé dans la page, vous devez donner une hauteur au style de classe, sinon l'image n'apparaîtra pas { height : 218px ; 🎜 >Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Swiper réalise un carrousel d'images publicitaires mobiles

Comment changer de bouton fléché avec le plug-in Swiper

Comment implémenter l'effet de minuterie dans Angular

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!