Vue3.0如何封装并使用全局轮播图

2024-03-11 23:40

本文主要是介绍Vue3.0如何封装并使用全局轮播图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 1.这是它的结构,css样式根据设计图再去写: 

<template><div class='xtx-carousel'><ul class="carousel-body"><li class="carousel-item fade"><RouterLink to="/"><img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg" alt=""></RouterLink></li></ul><a href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a><a href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a><div class="carousel-indicator"><span v-for="i in 5" :key="i"></span></div></div>
</template>

因为我写的这个项目,其它地方也要用轮播图,所以我这里把它封装成了全局的组件。

src/components/index.js 中两步 ,1.导入,2.

然后components/index.js在main.js中导入,main.js文件,定义了vue实例,并引入根组件app.vue,将其挂载到index.html中id为app的节点上。 

轮播图效果实现的原理:

定义一个变量currentIndex = 0表示第一张图片,默认渲染第一张图片即  xxx数组[currentIndex],然后获取每张图片的下标。点击切换图片时把当前图片的下标赋值给currentIndex即可实现图片切换显示。

点击小圆点切换图片: 

点击左右按钮切换图片: 

  const toggle = step => {index.value += stepif (index.value >= props.sliders.length) {index.value = 0}if (index.value < 0) {index.value = props.sliders.length - 1// 一共5 然后-1就是最后一张图}}

自动播放轮播: 

自定义指令用props来接收:

 

 这组件里面props都需要定义一些什么参数,比如说轮播图,是否需要自动播放,每一张图片自动播放的时间间隔,渲染图片的数组,这些都是到时候会发生改变的,所以props接收的就是这些会发生变化的参数

封装好全局组件之后,复用的时候: 就<XtxCarousel :sliders="[ ]" :autoPlay="true" :duration="2500">

  

这是轮播图全局组件代码 :

<template><div class='xtx-carousel' @mouseleave="stop" @mouseenter="enter"><ul class="carousel-body"><li class="carousel-item" v-for="(item,i) in sliders" :key="i" :class="{fade:index===i}"><RouterLink to="/"><img :src="item.imgUrl" alt=""></RouterLink></li></ul><a href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left" @click="toggle(-1)"></i></a><a href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right" @click="toggle(1)"></i></a><!-- //小圆点 --><div class="carousel-indicator"><span v-for="(item,i) in sliders" :key="i" :class="{active:index===i}" @click="index=i"></span></div></div>
</template>i<script>
import { onUnmounted, ref, watch } from 'vue'
export default {name: 'XtxCarousel',props: {sliders: {type: Array,default: () => []},duration: {type: Number,default: 3000},autoPlay: {type: Boolean,default: false}},setup (props) {// 默认显示的图片的索引const index = ref(0)let timer = null// 自动播放const autoPlayFn = () => {timer = setInterval(() => {index.value++if (index.value >= props.sliders.length) {index.value = 0}}, props.duration)}watch(props.sliders, (newVal) => {if (newVal.length && props.autoPlay) {index.value = 0autoPlayFn()}}, { immediate: true })// if (props.autoPlay) {//   autoPlayFn()// }console.log(timer)// 组件销毁时,清空计时器onUnmounted(() => {clearInterval(timer)})// 鼠标进入的时候const enter = () => {if (props.autoPlay) {clearInterval(timer)}}// 鼠标离开的时候const stop = () => {autoPlayFn()}// 点击了轮播图左边的按钮const toggle = step => {index.value += stepif (index.value >= props.sliders.length) {index.value = 0}if (index.value < 0) {index.value = props.sliders.length - 1// 一共5 然后-1就是最后一张图}}return { index, autoPlayFn, enter, stop, toggle }}
}
</script>
<style scoped lang="less">
.xtx-carousel{width: 100%;height: 100%;min-width: 300px;min-height: 150px;position: relative;.carousel{&-body {width: 100%;height: 100%;}&-item {width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;transition: opacity 0.5s linear;&.fade {opacity: 1;z-index: 1;}img {width: 100%;height: 100%;}}&-indicator {position: absolute;left: 0;bottom: 20px;z-index: 2;width: 100%;text-align: center;span {display: inline-block;width: 12px;height: 12px;background: rgba(0,0,0,0.2);border-radius: 50%;cursor: pointer;~ span {margin-left: 12px;}&.active {background:  #fff;}}}&-btn {width: 44px;height: 44px;background: rgba(0,0,0,.2);color: #fff;border-radius: 50%;position: absolute;top: 228px;z-index: 2;text-align: center;line-height: 44px;opacity: 0;transition: all 0.5s;&.prev{left: 20px;}&.next{right: 20px;}}}&:hover {.carousel-btn {opacity: 1;}}
}
</style>

这篇关于Vue3.0如何封装并使用全局轮播图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/799459

相关文章

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window

Ubuntu如何分配​​未使用的空间

《Ubuntu如何分配​​未使用的空间》Ubuntu磁盘空间不足,实际未分配空间8.2G因LVM卷组名称格式差异(双破折号误写)导致无法扩展,确认正确卷组名后,使用lvextend和resize2fs... 目录1:原因2:操作3:报错5:解决问题:确认卷组名称​6:再次操作7:验证扩展是否成功8:问题已解

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核