Wie vue.js die Mint-UI-Karussellkomponente verwendet

Dieses Mal zeige ich Ihnen, wie Sie die Mint-UI-Karussellkomponente in vue.js verwenden, wie Sie die Mint-UI-Karussellkomponente in vue.js verwenden Welche Vorsichtsmaßnahmen gibt es? Hier sind tatsächliche Fälle, schauen wir uns das an.

Vue-Projekt initialisieren

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

mint-ui installieren

yarn add mint-ui

Nachdem mint-ui installiert wurde, müssen Sie babel noch konfigurieren. Befolgen Sie einfach die offizielle Dokumentation von mint-ui, um es zu konfigurieren

Unten ist die von mir konfigurierte .babelrc-Datei. Beim Start wird ein Fehler im Zusammenhang mit es2015 gemeldet. Installieren Sie einfach 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"]
 }
 }
}

Integration

Öffnen Sie die erstellte Vue-Projektdemo, suchen Sie die Datei „components/HelloWorld.vue“ in src und ersetzen Sie dann den Inhalt durch den folgenden Inhalt

Suchen Sie zwei Bilder mit den Namen img1.png bzw. img2.png, fügen Sie sie in die Statik des Demoprojekts ein und

starten Sie dann das Projekt

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

Öffnen Sie den Browser: http://localhost:8080/

npm run dev

Achtung

1. Wenn Sie feststellen, dass der Text vollständig zentriert ist

Sie können die Datei App.vue finden und einfach den zentrierten CSS-Code darin entfernen

1. Wenn die Seite

Polsterung

hat Legen Sie den Rand des Textkörpers fest: 0 auto;

Bei Verwendung auf der Seite müssen Sie dem Klassenstil eine Höhe zuweisen, sonst wird das Bild nicht angezeigt { height: 218px; 🎜 >Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Swiper realisiert Bildkarussell für mobile Werbung

So wechseln Sie die Pfeiltasten mit dem Swiper-Plug-in

So implementieren Sie den Timer-Effekt in Angular

Das obige ist der detaillierte Inhalt vonWie vue.js die Mint-UI-Karussellkomponente verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!