Home > Web Front-end > JS Tutorial > body text

How vue.js uses mint-ui carousel component

php中世界最好的语言
Release: 2018-04-13 14:08:06
Original
4093 people have browsed it

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,因为它快些
Copy after login

Install mint-ui

yarn add mint-ui
Copy after login

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"]
 }
 }
}
Copy after login

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>
Copy after login

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
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template