How to integrate the carousel image in mint-ui in vue.js

This article mainly introduces how vue.js integrates the carousel chart in mint-ui. First, we need to initialize the vue project and then install mint-ui. The specific content details are learned by learning

Initialize the vue project

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

Install mint-ui

yarn add mint-ui

mint-ui is installed, you still need to configure babel. Just follow the official documentation of mint-ui to configure it.

The following is the .babelrc file I configured, start it Sometimes errors related to es2015 will be reported, just install 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

Open the created vue Project demo, find the components/HelloWorld.vue file in src, and then change the content to the following content

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

Find two pictures, the names are img1.png, img2.png, and put them in the static of the demo project , and then start the project

npm run dev

Open the browser: http://localhost:8080/

Note

1. If you find that the text is all centered

You can find the file App.vue and just remove the centered css code inside

1. If the page has Inner margin

Set the body style margin: 0 auto;

1. When used on the page, you must give the class style a height, otherwise the picture will not appear.mint-swipe { height: 218px; }

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to prevent repeated rendering using React

How to implement encapsulation based on the mssql module in nodejs

How to implement the directive function in vue

How to implement secondary linkage in js

The above is the detailed content of How to integrate the carousel image in mint-ui in vue.js. For more information, please follow other related articles on the PHP Chinese website!