Vue可复用轮播组件
whiteplayer 人气:0本文用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写一遍作为一个组件,也还不错。
加载全部内容