À propos de vue.js intégrant des images de carrousel dans mint-ui

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，因为它快些

Installer mint-ui

yarn add mint-ui

mint-ui est installé, vous devez configurer Babel , suivez la méthode Utilisez simplement la documentation officielle de mint-ui pour le configurer

Ce qui suit est le fichier .babelrc que j'ai configuré Au démarrage, une erreur liée à es2015 sera signalée. es2015 et tout ira bien

{
 "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 vue créée démo du projet et recherchez les composants dans le fichier src /HelloWorld.vue, 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, dont les noms sont img1.png, img2.png, placez-le dans le statique du projet de démonstration, puis démarrez le projet

npm run dev

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

Remarque

1.

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

1 Si la page a des marges intérieures

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

1. Utilisez-le dans la page When , vous devez donner une hauteur au style de classe, sinon l'image n'apparaîtra pas { height: 218px }

Ce qui précède est le. tout le contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun, plus Veuillez faire attention au site Web PHP chinois pour le contenu connexe !

Recommandations associées :

Introduction au processus de reconstruction d'un échafaudage multipage basé sur vue cli

Utilisation de l'état objet de voie vuex

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!