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

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

不言

Libérer： 2018-06-29 17:07:46

original

1936 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

Installer mint-ui

yarn add mint-ui

Copier après la connexion

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"]
 }
 }
}

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Remarque

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!