So integrieren Sie das Karussellbild in mint-ui in vue.js

In diesem Artikel wird hauptsächlich vorgestellt, wie vue.js das Karusselldiagramm in Mint-UI integriert. Zuerst müssen wir das Vue-Projekt initialisieren und dann Mint-UI installieren. Die spezifischen Inhaltsdetails können gelernt werden, indem Sie

Vue-Projekt initialisieren

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

mint-ui installieren

yarn add mint-ui

Nach der Installation von mint-ui müssen Sie babel noch konfigurieren. Folgen Sie einfach der offiziellen Dokumentation von mint-ui, um es zu konfigurieren.

Das Folgende ist die .babelrc Datei, die ich konfiguriert habe. Manchmal werden Fehler im Zusammenhang mit es2015 gemeldet. Installieren Sie einfach babel-preset-es2015

IntegrationÖffnen Suchen Sie in der erstellten vue-Projektdemo die Datei „components/HelloWorld.vue“ in src und ändern Sie dann den Inhalt in den folgenden Inhalt

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

Suchen Sie zwei Bilder, die Namen sind img1.png, img2.png, und setzen Sie sie sie in der Statik des Demo-Projekts 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 &#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>

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

Hinweis1. Wenn Sie feststellen, dass der Text zentriert ist

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

1. Wenn die Seite einen inneren Rand hat

Stellen Sie den Rand des Textkörpers ein: 0 automatisch;

1. Bei Verwendung auf der Seite müssen Sie dem Klassenstil eine Höhe zuweisen , sonst wird das Bild nicht angezeigt.mint-swipe { height: 218px; }

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verhindern Sie wiederholtes Rendern mit React

So implementieren Sie die Kapselung basierend auf dem MSSQL-Modul in NodeJS

So implementieren Sie die Direktivenfunktion in Vue

So implementieren Sie die sekundäre Verknüpfung in js

Das obige ist der detaillierte Inhalt vonSo integrieren Sie das Karussellbild in mint-ui in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!