Vue实现可复用轮播组件的方法
更新时间:2022年07月14日 15:38:23 作者:whiteplayer
这篇文章主要为大家详细介绍了Vue实现可复用轮播组件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
本文用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="http://9i0i.com/pic.php?p=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('https://'); * { ? 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写一遍作为一个组件,也还不错。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。
相关文章
vue+elemen实现el-tooltip在文本超出区域后浮现
el-tooltip组件本身就是悬浮提示功能,在对它进行二次封装时,实现超出的文本浮现,本文就来介绍一下vue+elemen实现el-tooltip在文本超出区域后浮现,感兴趣的可以了解一下2023-12-12用npm安装vue和vue-cli,并使用webpack创建项目的方法
今天小编就为大家分享一篇用npm安装vue和vue-cli,并使用webpack创建项目的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09Vue中addEventListener()?监听事件案例讲解
这篇文章主要介绍了Vue中addEventListener()?监听事件案例讲解,包括语法讲解和事件冒泡或事件捕获的相关知识,本文结合示例代码给大家讲解的非常详细,需要的朋友可以参考下2022-12-12vue?element?el-select下拉滚动加载的方法
很多朋友都遇到这样一个问题在使用vue+element的el-select下拉框加载返回数据太多时,会造成卡顿,用户体验欠佳,这篇文章主要介绍了vue?element?el-select下拉滚动加载方法,需要的朋友可以参考下2022-11-11
最新评论