Maison > interface Web > js tutoriel > Comment intégrer l'image du carrousel dans mint-ui dans vue.js

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

亚连
Libérer: 2018-06-15 13:59:46
original
2622 Les gens l'ont consulté

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,因为它快些
Copier après la connexion

Installation de mint-ui

yarn add mint-ui
Copier après la connexion

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"]
 }
 }
}
Copier après la connexion

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>
Copier après la connexion

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
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal