这篇文章主要为大家详细介绍了Vue实现可复用轮播组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文用vue简单的实现了一个轮播图的基础功能，并抽离出来作为一个公共组件，方便复用
html和js部分
<template>
<div
class="img-box"
ref="img-box"
:style="{width: styles.width, height: styles.height}"
>
<div v-for="(item, index) in imgList"
:key="index"
class="img-item"
:ref="'img-item-' + index"
:class="{'active': index === active}"
>
<img
:src="item"
style="width:100%"
:style="{height: styles.height}"
/>
</div>
<div
class="img-position"
v-if="isShowPosition"
>
<template v-for="(item, index) in imgList">
<span :key="index"
class="img-position-item"
:ref="'img-position-' + index"
:class="[
{'active': index === active},
isCircle ? 'circle' : '',
isNums ? 'nums' : ''
]"
@click="clickSpan(index)"
>
{{isNums ? index + 1 : ''}}
</span>
</template>
</div>
<div
class="left-btn"
v-if="isShowLeftOrRightBtn"
@click="clickBtn('left')"
>
<i class="iconfont roll-zuo"></i>
</div>
<div
class="right-btn"
v-if="isShowLeftOrRightBtn"
@click="clickBtn('right')"
>
<i class="iconfont roll-you"></i>
</div>
</div>
</template>
<script>
export default {
name: 'Roll',
props: {
imgList: { // 图片列表 src数组
type: Array,
default: () => []
},
isShowPosition: { // 是否显示下方小圆点
type: Boolean,
default: true
},
positionInner: { // 圆点内容
type: String,
default: 'circle' // 默认圆点，可选值 circle => 圆点 num => 数字 both => 圆点+数字
},
isShowLeftOrRightBtn: { // 是否显示左右按钮
type: Boolean,
default: true
},
duration: { // 切换间隔
type: [Number, String],
default: 3000
},
styles: { // 自定义轮播图片宽高 默认500*300
type: Object,
default: () => {
return {
width: '500px',
height: '300px'
}
}
}
},
data () {
return {
active: 0, // 当前轮播图片
timer: null // 定时器
}
},
computed: {
isCircle () {
return ['circle', 'both'].includes(this.positionInner)
},
isNums () {
return ['num', 'both'].includes(this.positionInner)
}
},
updated () {
if (this.timer) this.clearTimer()
this.setTimer()
},
created () {
this.setTimer()
},
methods: {
clickSpan (index) {
this.clearTimer()
this.active = index
},
clickBtn (arg) {
this.clearTimer()
if (arg === 'left') {
this.active = this.active - 1 < 0 ? this.imgList.length - 1 : this.active - 1
} else {
this.active = this.active + 1 === this.imgList.length ? 0 : this.active + 1
}
this.setTimer()
},
setTimer () {
this.timer = setInterval(() => {
this.clickBtn('right')
}, Number(this.duration))
},
clearTimer () {
clearInterval(this.timer)
this.timer = null
}
}
}
</script>
css样式部分
<style scoped>
@import url('//at.alicdn.com/t/font_1451815_senarwrqu6.css');
* {
margin: 0;
padding: 0;
}
.img-box {
position: relative;
margin: 0 auto;
}
.img-item {
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -5;
text-align: center;
}
.img-item.active {
z-index: 0;
opacity: 1;
transition: .3s;
}
.img-position {
position: absolute;
bottom: 5px;
left: 50%;
display: flex;
transform: translate(-50%, 0);
}
.img-position-item {
display: inline-block;
width:10px;
height:10px;
box-sizing: border-box;
cursor: pointer;
}
.img-position-item.circle {
border-radius: 50%;
border: 1px solid #606266;
}
.img-position-item.nums {
width: 18px;
height: 18px;
display: flex;
justify-content: center;
align-items: center;
color: #606266;
font-size:14px;
}
.img-position-item:hover, .img-position-item.active {
border-color: #d1d2d3;
color: #d1d2d3;
transition: .3s;
}
.img-position-item + .img-position-item {
margin-left: 10px;
}
.left-btn, .right-btn {
position: absolute;
top: 50%;
bottom: 0;
width: 20px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: #d1d2d3;
font-size: 20px;
transform: translate(0, -50%);
}
.left-btn:hover, .right-btn:hover {
color: #fff;
transition: .3s;
}
.left-btn {
left: 5px;
}
.right-btn {
right: 5px;
}
</style>
只是简单的实现了一个轮播图比较基础的部分，之前用原生写了一遍，现在用vue写一遍作为一个组件，也还不错。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
