About vue.js integrating carousel images in mint-ui-JS Tutorial-php.cn

About vue.js integrating carousel images in mint-ui

不言

Release： 2018-06-29 17:07:46

Original

1956 people have browsed it

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 can be learned by learning

Initialize the vue project

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

Copy after login

Install mint-ui

yarn add mint-ui

Copy after login

mint-ui is installed, you need to configure babel, the method follows mint-ui Just use the official documentation to configure it

The following 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"]
 }
 }
}

Copy after login

Integration

Open the created vue project demo and find the components/HelloWorld.vue file in src. Then change the content to the following

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

Copy after login

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

npm run dev

Copy after login

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 remove the centered css code inside

1. If the page has internal margins

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 come out. mint-swipe { height: 218px; }

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the process of reconstructing multi-page scaffolding based on vue cli

Using the state object of vuex The way

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