Vue3封装一个轮播图组件

先看效果
在这里插入图片描述

编写组件代码 CarouselChart.vue

<template><div class='img-box'><el-button @click='previousImages' v-if='props.showBtn'></el-button><div class='img'><div style='display: flex;gap: 20px' id='move'><imgclass='img-item' v-for='(item) in props.imgList':key='item.src':src='item.src'alt='' /></div></div><el-button @click='nextImages' v-if='props.showBtn'></el-button><div class='spots' v-if='props.showSpot'><divclass='spot'v-for='(item,index) in props.imgList.length / 2':key='index':class="{'active':index*2 === currentIndex}"@click='setCurIndex(index)'></div></div></div>
</template><script setup>
import { defineProps, defineEmits } from 'vue'const emit = defineEmits(['handlePrev', 'handleNext'])
const props = defineProps({// 图片imgList: {type: Object,required: true,},// 是否显示左右切换按钮showBtn: {type: Boolean,default: true,},// 是否显示小圆点showSpot: {type: Boolean,default: true,},
})const currentIndex = ref(0)const updateVisibleImages = () => {const imgDom = document.querySelector('#move')imgDom.style.transform = `translateX(-${((currentIndex.value * 440) + ((currentIndex.value) * 20))}px)`imgDom.style.transition = `all 0.5s`
}const nextImages = () => {if (currentIndex.value + 2 >= props.imgList.length) returncurrentIndex.value += 2updateVisibleImages()emit('handleNext')
}const previousImages = () => {if (currentIndex.value <= 0) returncurrentIndex.value -= 2updateVisibleImages()emit('handlePrev')
}const setCurIndex = (index) => {currentIndex.value = index * 2updateVisibleImages()
}</script><style scoped lang='scss'>
.img-box {display: flex;align-items: center;justify-content: center;gap: 20px;width: 100%;height: 100%;position: relative;.img {width: 900px;overflow: hidden;transition: all 0.5s;.img-item {width: 440px;img {width: 100%;}}}.spots {position: absolute;left: 50%;margin-top: 20%;transform: translateX(-50%);display: flex;gap: 20px;align-items: center;justify-content: center;.spot {width: 10px;height: 10px;border-radius: 5px;background-color: #1a60ea;transition: all 0.5s;cursor: pointer;&:hover {transform: scale(1.5);}}.active {background-color: #ea1ccc;transform: scale(2);transition: all 0.5s;}}
}
</style>

使用这个组件

<template><div class='h-full w-full flex align-center justify-center'><CarouselChart:img-list='imgList'@handlePrev='handlePrev'@handleNext='handleNext'/></div>
</template>
<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import img1 from '@/assets/lunbo/01.jpg'
import img2 from '@/assets/lunbo/02.jpg'
import img3 from '@/assets/lunbo/03.jpg'
import img4 from '@/assets/lunbo/04.jpg'
import img5 from '@/assets/lunbo/05.jpg'
import img6 from '@/assets/lunbo/06.jpg'
import img7 from '@/assets/lunbo/07.jpg'
import img8 from '@/assets/lunbo/08.jpg'
import img9 from '@/assets/lunbo/09.jpg'
import img10 from '@/assets/lunbo/10.jpg'let imgList = reactive([{ src: img1 },{ src: img2 },{ src: img3 },{ src: img4 },{ src: img5 },{ src: img6 },{ src: img7 },{ src: img8 },{ src: img9 },{ src: img10 },
])function handleNext() {ElMessage.warning('下一张')
}function handlePrev() {ElMessage.success('上一张')
}</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/215262.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centos7部署docker

文章目录 &#xff08;1&#xff09;安装前准备&#xff08;2&#xff09;卸载旧版Docker&#xff08;3&#xff09;安装docker&#xff08;4&#xff09;配置镜像加速 &#xff08;1&#xff09;安装前准备 在开始安装之前&#xff0c;首先需要检查内核版本。使用 uname -r 命…

nodejs微信小程序+python+PHP个性化服装搭配系统APP-计算机毕业设计推荐 android

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

redis(设置密码)配置文件详细

1.设置账号密码端口 config set requirepass 123456 设置密码为123456 config get requirepass 查看账号密码 auth 123456 登入的时候输入这个确定账号密码 1. 首先连接到Redis服务器: redis-cli 2. 然后使用CONFIG SET命令设置requirepass参数并指定密码: CONFIG SET requi…

【PyTorch】现代卷积神经网络

文章目录 1. 理论介绍1.1. 深度卷积神经网络&#xff08;AlexNet&#xff09;1.1.1. 概述1.1.2. 模型设计 1.2. 使用块的网络&#xff08;VGG&#xff09;1.3. 网络中的网络&#xff08;NiN&#xff09;1.4. 含并行连结的网络&#xff08;GoogLeNet&#xff09; 2. 实例解析2.1…

家具制造ERP软件包含哪些功能?家具制造业ERP系统哪个好

不同的家具有不同的用料、品质、制造工时、营销渠道等&#xff0c;而有些家具制造企业采用传统的管理方式在处理物料BOM、生产实际成本核算、库存盘点、供应商选择、班组计件核对、生产领用以及物料追溯等方面存在不少提升空间。 与此同时也有很多的皮具制造企业借助ERP软件优…

Linux16 ftp文件服务区、vsftpd文件系统服务安装、lftp客户端安装、NFS远程共享存储

目录 一、FTP基础ftp主动模式ftp被动模式 二、vsftpd配置共享目录编辑配置文件使用windows 访问 三、客户端安装 &#xff08;lftp&#xff09;匿名用户的一些操作&#xff08;lftp {ip}&#xff09;ftp配置本地用户登录配置本地用户ftp配置文件 lftp操作 NFS远程共享存储安装n…

新的侧通道攻击可泄露处理器的 Root 密码

阿姆斯特丹自由大学的一组科学家开发了一种名为 SLAM&#xff08;Spectre Linear Address Masking&#xff09;的侧信道攻击。 该攻击利用旨在提高新型Intel、AMD 和 Arm 处理器安全性的硬件功能&#xff0c;从内核内存中提取根密码哈希。 重现 SLAM 攻击所需的代码和所有数据…

dockerfile:创建镜像的方式,船舰自定义的镜像

dockerfile&#xff1a;创建镜像的方式&#xff0c;船舰自定义的镜像 包括配置文件&#xff0c;挂载点&#xff0c;对外暴露的端口&#xff0c;设置环境变量 docker创建镜像的方式 1、基于已有镜像进行创建。 根据官方提供的镜像源&#xff0c;创建镜像&#xff0c;然后拉起…

IP与以太网的转发操作

TCP模块在执行连接、收发、断开等各阶段操作时&#xff0c;都需要委托IP模块将数据封装成包发送给通信对象。 网络中有路由器和集线器两种不同的转发设备&#xff0c;它们在传输网络包时有着各自的分工。 (1)路由器根据目标地址判断下一个路由器的位置 (2)集线器在子网中将网…

docker的镜像创建 dockerfile

dockerfile Dokcer镜像的创建 创建镜像有三种方法&#xff0c;分别为【基于已有镜像创建】、【基于本地模板创建】以及【基于Dockerfile创建】。 &#xff08;1&#xff09;首先启动一个镜像&#xff0c;在容器里做修改 docker run -itd --name web centos:7 /bin/bash …

k8s pod日志写入ELK的具体实现

shigen坚持更新文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 在上一部分&#xff0c;shigen讲到了k8spod的日志写入ELK的三种技术方案&#xff0c;并在最后展示了一下我…

QMainWindow和QWidget有什么区别

2023年12月12日&#xff0c;周二上午 QMainWindow 和 QWidget 是 Qt 框架中两个不同的类&#xff0c;用于创建用户界面的窗口部件。它们之间的主要区别在于它们的设计和用途。 QMainWindow: QMainWindow 是用于创建主窗口的类&#xff0c;通常包含了一个应用程序的主要界面。…

NFR 数字权益开发流程

NFR 在技术开发领域通常指的是“非功能性需求”&#xff08;Non-Functional Requirements&#xff09;&#xff0c;这些是描述系统属性如安全性、性能、可用性、兼容性等方面的需求。然而&#xff0c;如果在这里 NFR 被用来指代与数字权益或非同质化代币&#xff08;NFT&#x…

C++ 构造函数 调用方法

构造函数 调用方法 //括号法&#xff08;常用&#xff09; Person p1(100); //有参构造 Person p2(p1); //拷贝构造//注意&#xff1a;不要用括号法调用无参构造&#xff0c;会和 函数声明 混淆。//显示法 Person p3 Person(); //无参构造 Person p4 Person(100); //有参构…

【USRP】LFTX / LFRX

LFTX/LFRX 设备概述 LFTX 子板利用两个高速运算放大器来允许 0-30 MHz 的传输。该板仅接受实模式信号。LFTX 非常适合 HF 频段的应用&#xff0c;或使用外部前端来上变频和放大中间信号的应用。LFTX 的输出可以独立处理&#xff0c;也可以作为单个 I/Q 对进行处理。 主要特征…

Python - 搭建 Flask 服务实现图像、视频修复需求

目录 一.引言 二.服务构建 1.主函数 upload_gif 2.文件接收 3.专属目录 4.图像修复 5.gif2mp4 6.mp42gif 7.图像返回 三.服务测试 1.服务启动 2.服务调用 四.总结 一.引言 前面我们介绍了如何使用 Real-ESRGAN 进行图像增强并在原始格式 jpeg、jpg、mp4 的基础上…

HeartBeat监控Redis状态

目录 一、概述 二、 安装部署 三、配置 四、启动服务 五、查看数据 一、概述 使用heartbeat可以实现在kibana界面对redis服务存活状态进行观察&#xff0c;如有必要&#xff0c;也可在服务宕机后立即向相关人员发送邮件通知 二、 安装部署 参照文章&#xff1a;HeartBeat监…

Java实现多线程的三种方式

Java 有三种方式实现多线程&#xff0c;继承 Thread 类、实现 Runnable 接口、实现 Callable 接口。还有匿名内部类方式&#xff0c;Lambda 表达式方式简化开发。 1、Thread Thread 创建线程方式&#xff1a;创建线程类 start() 方法底层其实是给 CPU 注册当前线程&#xff0…

关于IDEA中maven的作用以及如何配置MAVEN

关于IDEA中maven的作用以及如何配置MAVEN 1、Maven是什么2、Idea中对于Maven的配置3、下载依赖时&#xff0c;Idea下方的显示3.1、Maven中央仓库的下载显示界面3.2、阿里云仓库的下载显示界面 4、Maven在Idea中的使用4.1、clean4.2、validate4.3、compile4.4、test&#xff08;…

智能优化算法应用:基于人工蜂群算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于人工蜂群算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于人工蜂群算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.人工蜂群算法4.实验参数设定5.算法结果6.…