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作为一个组件，可以现在一个轮播图比较基础的部分，大家可以多多参照。