How vue.js uses mint-ui carousel component

This time I will show you how to use mint-ui carousel component in vue.js, how to use mint-ui carousel component in vue.js What are the precautions? The following is a practical case, let’s take a look.

Initialize vue project

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

Install mint-ui

yarn add mint-ui

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

Below is the .babelrc file I configured. When starting, an error 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 replace the content with 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 '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>

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

npm run dev

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

Notice

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 it

1. If the page has padding

Set the body style margin: 0 auto;

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Swiper implements mobile advertising image carousel

##How does the swiper plug-in switch arrow buttons

How does Angular implement the timer effect

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