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 '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 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!