Comment intégrer l'image du carrousel dans mint-ui dans vue.js

Cet article présente principalement comment vue.js intègre le graphique carrousel dans mint-ui. Tout d'abord, nous devons initialiser le projet vue, puis installer mint-ui. Les détails spécifiques du contenu peuvent être appris en apprenant

Initialisation du projet vue

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

Installation de mint-ui

yarn add mint-ui

Une fois mint-ui installé, babel doit être configuré. Suivez simplement la documentation officielle de mint-ui pour le configurer

Ce qui suit. ce que j'ai configuré. fichier babelrc, les erreurs liées à es2015 seront signalées au démarrage, 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 modifiez 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 &#39;mint-ui&#39;
 import &#39;mint-ui/lib/style.css&#39;

 export default {
 components: {
  &#39;mt-swipe&#39;: Swipe,
  &#39;mt-swipe-item&#39;: SwipeItem
 },
 data () {
  return {
  items: [{
   title: &#39;你的名字&#39;,
   href: &#39;http://google.com&#39;,   url: &#39;http://localhost:8080/static/img1.png&#39;
  }, {
   title: &#39;我的名字&#39;,
   href: &#39;http://baidu.com&#39;,   url: &#39;http://localhost:8080/static/img2.png&#39;
  }]
  }
 }
 }
</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 portant les noms img1.png et img2. png, mettez-le dans le statique du projet démo, puis démarrez le projet

npm run dev

et ouvrez le navigateur : http://localhost:8080/

Remarque

1. Si vous constatez que le texte est centré

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

1 Si la page a des marges internes

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

Lorsqu'il est utilisé sur la page, vous devez donner. le style de classe a height , sinon l'image n'apparaîtra pas { height: 218px; }

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment empêcher le rendu répété à l'aide de React

Comment implémenter l'encapsulation basée sur le module mssql dans nodejs

Comment implémenter la fonction de directive dans vue

Comment implémenter la liaison secondaire dans js

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!