今天就跟大家聊聊有关如何在Vue2中使用slide轮播图组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
<v-carousel :slideData="slideData" :height="450" :begin="0" :interval="3000" :dot="true" :arrow="true"></v-carousel>
话不多说直接上源码
轮播图应用页面 \components\public\home.vue
<template>
<div id="home">
<v-carousel :slideData="slideData" :height="450" :begin="0" :interval="3000" :dot="true" :arrow="true"></v-carousel>
</div>
</template>
<script>
import carousel from "./public/carousel";
export default {
name: 'home',
data() {
return {
slideData:[
{
title:'这是一个Vue轮播图组件',
src:require('../assets/pic1.jpg'),
url:'/show/499'
},
{
title:'这是一个Vue轮播图组件',
src:require('../assets/pic2.jpg'),
url:'/show/499'
},
{
title:'这是一个Vue轮播图组件',
src:require('../assets/pic3.jpg'),
url:'/show/499'
},
{
title:'这是一个Vue轮播图组件',
src:require('../assets/pic4.jpg'),
url:'/show/499'
},
{
title:'这是一个Vue轮播图组件',
src:require('../assets/pic5.jpg'),
url:'/show/499'
},
]
}
},
components:{
'v-carousel': carousel,
},
methods: {
},
mounted() {
}
}
</script>
<style scoped>
</style>轮播图组件页面 src\components\public\carousel.vue
<template>
<div id="carousel">
<div class="carousel" ref="carousel" v-bind:>
<transition-group tag="ul" class="slide clearfix" :name="transitionName" >
<li v-for="(item,index) in slideData" :key="index" v-show="index==beginValue" v-bind: >
<router-link :to="item.url">
<img :src="item.src">
<div class="title">{{item.title}}</div>
</router-link>
</li>
</transition-group>
<div class="up" @click="up" v-show="arrow"></div>
<div class="next" @click="next" v-show="arrow"></div>
<div class="slideDot" v-show="dot">
<span v-for="(item,index) in slideData" :class="{active:index==beginValue}" @click="change(index)" :key="index"></span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "carousel",
data(){
return{
setInterval:'',
beginValue:0,
transitionName:'slide'
}
},
beforeDestroy() {
// 组件销毁前,清除监听器
clearInterval(this.setInterval);
},
methods:{
change(key){
if(key>(this.slideData.length-1)){
key=0;
}
if(key<0){
key=this.slideData.length-1;
}
this.beginValue=key;
},
autoPlay(){
//console.log(this.$refs.carousel.getBoundingClientRect().width);
this.transitionName='slide';
this.beginValue++
if(this.beginValue>=this.slideData.length){
this.beginValue=0;
return;
}
},
play(){
this.setInterval=setInterval(this.autoPlay,this.interval)
},
mouseOver(){ //鼠标进入
//console.log('over')
clearInterval(this.setInterval)
},
mouseOut(){ //鼠标离开
//console.log('out')
this.play()
},
up(){ //上一页
--this.beginValue;
this.transitionName='slideBack';
this.change(this.beginValue);
},
next(){ //下一页
++this.beginValue;
this.transitionName='slide';
this.change(this.beginValue);
}
},
mounted(){
var box = this.$refs.carousel; //监听对象
box.addEventListener('mouseover',()=>{
this.mouseOver();
})
box.addEventListener('mouseout',()=>{
this.mouseOut();
})
this.beginValue=this.begin;
this.play();
},
props:{
height:{
type: Number,
default: 600
},
dot:{
type: Boolean,
default: true
},
arrow:{
type: Boolean,
default: true
},
interval:{
type: Number,
default: 5000
},
begin:{
type: Number,
default: 0
},
slideData:{
type: Array,
default: function () {
return [];
}
}
}
}
</script><style scoped>
.slide{position: relative;margin: 0;padding: 0; overflow: hidden;width: 100%; height:450px;}
.slide li{list-style: none;position: absolute;width: 100%; height:450px;}
.slide li img{width: 100%; height:450px;cursor:pointer}
.slide li .title{position: absolute; left:0; bottom: 0; padding: 10px 20px; width: 100%; background: rgba(0,0,0,.35);color: #fff;font-size: larger; text-align: center}
.slideDot{position: absolute;z-index: 999; bottom: 60px;right:15px; }
.slideDot span{display: inline-block; width: 30px; height: 7px; background:rgba(255,255,255,.65); margin-left: 5px;}
.slideDot span.active{background:rgba(255,255,255,1);}
.up,.next{position: absolute; left:0; top: 50%; margin-top: -32px; cursor: pointer; width:64px;height: 64px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.up{background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABSklEQVRoQ9Xa220CMRCF4XMqIB0kdJASSCfpIDWlAzqAElIC6SBUMNFIywsCtB7PjX336v/k3YexTBQ+IvIC4AvAN8mTJYWWRR5rROQdwAGAIk4kt5b3lgCu4rX7l+TbUwBuxJ8B7Ej+tAd4xys47ROKiE8DRMWnACLjwwHR8aGAjPgwQFZ8CCAz3h3QHe8KqIh4A1TFuwAq46cB1fFTgA7xZkCXeBOgU/wwoFv8EKBj/GpA1/gRgJ4e7JaZdWqGtcy9j9asGilFRM9sXpcX/QH4sA7hVQA9wzkC2HRDrNoBjV7+g3aI1YCuiCFAR8QwoBvCBOiEMAO6IKYAHRDTgGqEC6AS4QaoQrgCKhDugGxECCATEQbIQoQCMhDhgGhECiASkQaIQqQCIhDpgDuI57orcQNxJqmXPoafkh34VIqIXvD4BLC3HtP8A6pfGkB3vbyXAAAAAElFTkSuQmCC");}
.next{left: auto;right:0;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOElEQVRoQ9Xa0W0CQQyEYU9JqShQAXSSEgIdUAIlQAd04milezgdOiHZ4/GGN5C8/N/u060Olvy4+8nMngDuyaVC4whNLUPufjazn+XrEcAls15klgkY/y9HpACj2N3Hrn+vdk+KSAO6ERRAJ4IG6EJQAR0IOkCNKAEoEWUAFaIUoECUA6oREkAlQgaoQkgBFQg5gI1oATARbQAWohXAQLQDsogpABnENIAoYirADuILwGPvxmJGwK+ZHVbB/wfg7tv4K4A15u0gpjmBSPzQTAGIxk8ByMS3A7LxrQBGfBuAFd8CYMbLAex4KaAiXgaoipcAKuPLAdXxpQBFfBlAFV8CUMbTAep4KqAjngboiqcAOuPTgM27EmO9j8+we7cL0d9Tj5QbgDw+fQLLPc54Y+UF4BbdxczcH9Le8DFn39OvAAAAAElFTkSuQmCC");}
.up:hover{background-color: rgba(0,0,0,.3)}
.next:hover{background-color: rgba(0,0,0,.3)}
/*进入过渡生效时的状态*/
.slide-enter-active{
transform:translateX(0);
transition: all 1s ease;
}
/*进入开始状态*/
.slide-enter{
transform:translateX(-100%);
}
/*离开过渡生效时的状态*/
.slide-leave-active{
transform:translateX(100%);
transition: all 1s ease;
}
/*离开过渡的开始状态*/
.slide-leave{
transform:translateX(0);
}
/*进入过渡生效时的状态*/
.slideBack-enter-active{
transform:translateX(0);
transition: all 1s ease;
}
/*进入开始状态*/
.slideBack-enter{
transform:translateX(100%);
}
/*离开过渡生效时的状态*/
.slideBack-leave-active{
transform:translateX(-100%);
transition: all 1s ease;
}
/*离开过渡的开始状态*/
.slideBack-leave{
transform:translateX(0);
}
</style>看完上述内容，你们对如何在Vue2中使用slide轮播图组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
