当前位置：首页 > news >正文

vue vue3 走马灯Carousel

news 来源：原创 2025/7/19 12:58:04

背景：

在项目中需要展示多张图片，但在页面上只有一张图片的有限位置，此时考虑使用轮播图实现多张图片的展示。element组件官网有走马灯Carousel的组件详细介绍。

实现效果：

官网链接：点击跳转

核心代码：

<el-carouselstyle="width: 100%; height: 100%":interval="5000":trigger="'click'":indicator-position="'none'"><el-carousel-itemv-for="(item, index) of state.ferryPortdata.photoList":key="index"><div class="aspect-container"><el-imageclass="carousel-image":src="BASEUrl + '/file/' + item.file":preview-src-list="[BASEUrl + '/file/' + item.file]":preview-teleported="true"alt=""fit="cover"/></div></el-carousel-item></el-carousel>

组件的属性：

走马灯组件的属性，如下：

autoplay：是否自动切换。默认值true

interval：自动切换的时间间隔，单位为毫秒。默认值3000

trigger：指示器的触发方式。属性值：'hover' | 'click' 。默认值hover

indicator-position：指示器的位置。属性值3种：'' | 'none' | 'outside'

默认情况下，它会显示在走马灯内部，设置为 outside 则会显示在外部；设置为 none 则不会显示指示器。

el-image图片组件的属性，如下：

src ：图片源地址

fit：图片如何适应容器框。属性值：'' | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'

preview-src-list：开启图片预览功能。string[]

preview-teleported：image-viewer 是否插入至 body 元素上。

嵌套的父元素属性会发生修改时应该将此属性设置为 true【即图片放大到全局】

写到这儿。。。走马灯轮播图的效果就实现了。。。

下面是走马灯的图片的点击放大效果。

走马灯点击放大：

思路如下：

走马灯的图片点击放大实现思路如下：：

1、查看走马灯组件是否有click点击事件。

2、自定义一个click事件，绑定在图片身上，当点击图片触发图片放大的效果。

3、el-image图片组件，图片点击放大的属性且放大到全局。推荐用法！！！

1、走马灯组件是否有点击事件：

通过访问走马灯组件的官网知道，走马灯没有相应的点击事件

2、自定义图片的点击事件：

给走马灯组件内部的每一张图片绑定click自定义事件，自定义事件实现图片放大效果

实现效果：

核心代码：

点击事件：

const showPreview = ref(false);
const handleClick = (data) => {showPreview.value = true;state.imgSrc = BASEUrl + "/file/" + data.file;
};

图片预览组件：

//图片预览el-image-viewer组件
//state.imgSrc是每次点击图片的地址
<el-image-viewerv-if="showPreview":url-list="[state.imgSrc]"@close="showPreview = false"/>

图片预览官网链接：点击跳转

3、el-image图片组件的点击放大【推荐】：

实现效果：

图片能够实现点击放大，并且放大到全局。放大到全局需要设置el-image的一个属性preview-teleported=“true”，用于控制image-viewer 是否插入至 body 元素上。

官网链接：点击跳转

未设置效果：

设置代码及效果：

//el-image图片预览效果，image-viewer相对于标签body
//:preview-teleported="true"<el-imagev-if="state.sixNoData.photo"class="img-style":src="BASEUrl + '/file/' + state.sixNoData.photo"alt=""fit="cover":preview-src-list="[BASEUrl + '/file/' + state.sixNoData.photo]":preview-teleported="true"/>

备注：

问：走马灯组件和图片预览组件的代码应该怎么组合使用？

走马灯组件和图片预览组件放置在同级，如下：

不能这样放：

问题：图片为什么显示加载失败？

答：图片涉及到了跨域处理，前端做了对一个图片地址src的访问代理。

接口返回的数据如下：

other/fe9824e5-e1bf-4af8-9e19-9ce508e19fd4.jpg

前端能够展示的src形式是：

/file/other/d19b3d89-5ac5-46e5-a004-8cd51434168e.jpg是文件存放路径

BASEUrl + '/file/' + item.file

即：

/apiproxy/pa/file/other/d19b3d89-5ac5-46e5-a004-8cd51434168e.jpg

/apiproxy/pa是前端代理

问题：state.ferryPortdata.photoList响应式变量的数据结构是什么样的？

答：是接口返回的数据，其中涉及到的数据，示例如下：

//涉及到的数据
[{"pid": 142,"category": null,"type": 6,"file": "other/fe9824e5-e1bf-4af8-9e19-9ce508e19fd4.jpg","associationId": 119,"dateOfIssue": "2025-03-13 14:06:45","deadline": null,"isValid": null},{"pid": 143,"category": null,"type": 6,"file": "other/e1ce36cc-7085-490c-bb9d-b4589590c751.jpg","associationId": 119,"dateOfIssue": "2025-03-13 14:06:45","deadline": null,"isValid": null},{"pid": 144,"category": null,"type": 6,"file": "other/c2fc72b8-ec93-4f4d-bdaf-866fe8e3ad31.jpg","associationId": 119,"dateOfIssue": "2025-03-13 14:06:45","deadline": null,"isValid": null},{"pid": 145,"category": null,"type": 6,"file": "other/a091bb95-66c3-4870-84ce-a9d34a0f81a1.jpg","associationId": 119,"dateOfIssue": "2025-03-13 14:06:45","deadline": null,"isValid": null},{"pid": 146,"category": null,"type": 6,"file": "other/d19b3d89-5ac5-46e5-a004-8cd51434168e.jpg","associationId": 119,"dateOfIssue": "2025-03-13 14:06:45","deadline": null,"isValid": null}
]

vue vue3 走马灯Carousel

背景： 在项目中需要展示多张图片，但在页面上只有一张图片的有限位置，此时考虑使用轮播图实现多张图片的展示。element组件官网有走马灯Carousel的组件详细介绍。实现效果： 官网链接：点击跳转核心代码： …...

编程日记 2025/7/19 12:58:04

Android设计模式之Builder模式

一、定义：将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。二、核心思想： 分离构造与表示：将对象的构建过程（如参数组合、校验逻辑）与对象本身分离。链式调用：通…...

编程日记 2025/7/16 12:12:31

【时时三省】(C语言基础)关系运算符和关系表达式

山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省在if语句中对关系表达式disc > 0进行判断。其中的“>”是一个比较符，用来对两个数值进行比较。在C语言中，比较符（或称比较运算符）称为关…...

编程日记 2025/7/18 18:34:46

运算放大器（二）运算放大器的选型与应用

1.运算放大器的工艺决定Vos和Ib 2.TI放大器的命名规律 3.TI精密放大器家族 4.精密运放的选型指南 5.高共模抑制比放大器 6.TI其他的精密放大器 7.选型时需考虑的问题 8.TI精密运放选型实例先确定供电电压 9.确定放大器的步骤参考： 注：本文出自对b…...

编程日记 2025/7/19 12:57:02

vulhub靶场jangow-01-1.0.1

启动靶机时点shift停在这个界面点e进入编辑页面，把ro改成rw signie init/bin/bash Ctrlx保存，ip a查看网卡信息 vim /etc/network/interfaces 把enp0s17改为ens33，保存退出重启靶机，nmap扫ip ip为192.168.93.179 nmap扫端口扫…...

编程日记 2025/7/19 12:43:14

android 一步完成 aab 安装到手机

家人们谁懂！在 Android 系统安装 aab 应用超麻烦。满心期待快速体验，却发现 aab 无法直装，得先转为 apks 格式，这过程复杂易错。好不容易转好，还得安装 apks，一番折腾，时间与耐心全耗尽。别愁&a…...

编程日记 2025/7/19 12:31:35

mysqlworkbench导入.sql文件

1、MySQL Workbench 新建数据库或者在左侧导航栏的 Schemas 区域右键选择 Create Schema...输入数据库名称（例如 mydatabase），点击 Apply确认创建，点击 Finish 2、选择目标数据库在左侧导航栏的 Schemas 列表中&a…...

编程日记 2025/7/19 12:47:47

pyqt 信号与槽

PySide6 信号与槽机制详解引言 PySide6 是 Qt for Python 的官方绑定库，为 Python 提供了强大的 GUI 开发能力。其中，信号与槽（Signals and Slots） 机制是 Qt 事件处理系统的核心，它允许对象之间进行松耦合的通信&a…...

编程日记 2025/7/19 12:38:39

深入探索C++：从基础到实践

目录引言一、C 基础语法与特性 （一）命名空间（Namespace） 单独使用嵌套使用调用形式 （二）输入输出流（I/O Streams） （三）变量作用域二、C 的…...

编程日记 2025/7/19 12:32:43

从零开始完成冒泡排序（0基础）——C语言版

文章目录前言一、冒泡排序的基本思想二、冒泡排序的执行过程（一）第一轮排序（二）第二轮排序（三）第三轮排序（四）第四轮排序三、冒泡排序的代码实现（C语言）&am…...

编程日记 2025/7/19 12:54:23

Echars插入的柱状图条形图，鼠标放在图上显示坐标值

只需要将axiosPointer改为cross axisPointer.type支持类型及作用： line：默认直线型指向线shadow：显示坐标轴方向的阴影区域cross：交叉线（横向纵向双线）none：不显示指向器inside：结合…...

编程日记 2025/7/19 12:36:27

机械臂如何稳稳上桌？Mujoco场景修改实操

视频讲解： 机械臂如何稳稳上桌？Mujoco场景修改实操前面《常见机械臂模型不用找！Mujoco这儿都有！》中介绍的mujoco-menagerie中机械臂大多都是base_link放在地上的，这些场景往往和真实的场景对应不上，比如机…...

编程日记 2025/7/19 12:45:28

金融级密码管理器——抗内存扫描的密钥保险箱

目录金融级密码管理器 —— 抗内存扫描的密钥保险箱一、模块概述与设计背景二、技术原理与设计目标2.1 关键安全原理2.2 设计目标三、系统架构设计3.1 系统架构图（Mermaid示意图）四、关键技术与安全策略4.1 密钥分割与加密存储4.2 动态内存随机化技术4.3 内存扫描检测与自动…...

编程日记 2025/7/19 12:55:32

如何查看 SQL Server 的兼容性级别

在 SQL Server 中，兼容性级别是一个非常重要的设置，它决定了数据库在特定版本的 SQL Server 中运行时所使用的行为和功能。不同版本的 SQL Server 可能会在 SQL 查询优化、索引、语法、错误处理等方面有差异，因此，设置正确的兼容性…...

编程日记 2025/7/16 5:14:03

AI for CFD入门指南（传承版）

AI for CFD入门指南前言适用对象核心目标基础准备传承机制 AI for CFDLibtorch的介绍与使用方法PytorchAutogluon MakefileVscodeOpenFOAMParaviewGambit 前言适用对象新加入课题组的硕士/博士研究生对AICFD交叉领域感兴趣的本科生实习生需要快速上手组内研究工具的合作研…...

编程日记 2025/7/17 14:58:34

人工智能与网络安全

目录 1、人工智能的安全和安全的人工智能各有什么含义，如何解决 2、当人工智能技术应用于某一安全领域，会对该领域的攻守双方带来哪些机遇与挑战 3、ChatGPT原理、ChatGPT的缺陷 ChatGPT的缺陷 4、人工智能与算力，风险挑战应对 5、人…...

编程日记 2025/7/15 8:08:02

GPIO输出实验，控制LED灯

1.实验工具：FSMP1A开发板核心板： 拓展板： 2.实验要求：编写汇编程序，实现三盏灯流水程序代码： .text .global _start _start: 将RCC_MP_AHB4ENSET寄存器第4位设置为1，使能GPIO外设时钟 …...

编程日记 2025/7/18 5:01:34

小区团购管理设计与实现(代码+数据库+LW)

摘要传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，在计算机上安装小区团购管理软件来发挥其高效地信息处理的作用&#xff0…...

编程日记 2025/7/16 9:03:47

How to use pgbench to test performance for PostgreSQL?

pgbench 是一个用于测试 PostgreSQL 数据库性能的基准测试工具。通过模拟多个客户端并发执行 SQL 查询，它可以帮助你评估数据库的性能。以下是使用 pgbench 的基本步骤： 安装 pgbench pgbench 是 PostgreSQL 的一部分，因此在安装 PostgreSQ…...

编程日记 2025/7/14 1:48:56

dbeaver插入mongodb数据日期默认使用ISODate处理，但是插入数据以后实际上是ISODate(2025-03-03T03:25:19.640Z)字符串 INSERT INTO xxx.aaa (_id, chatId, buddyId, pId, lastChatId, inspiration, createTime, modelType, version, selectedInspiration, _class)…...

编程日记 2025/7/17 18:40:36

wgcloud怎么实现服务器或者主机的远程关机、重启操作吗

可以，WGCLOUD的指令下发模块可以实现远程关机和重启使用指令下发模块，重启主机，远程关机，重启agent程序- WGCLOUD...

编程日记 2025/6/28 6:33:10

PrimeTime生成.lib竟暗藏PG添加Bug

在primeTime里生成lib，如何能带上相关的pg信息？ 这是一位群友的发问，就这个问题总结了下可能的原因和解决步骤： 概念 PrimeTime是Synopsys的静态时序分析工具，通常用于在设计的各个阶段进行时序验证。 1&#xff09…...

编程日记 2025/7/16 4:36:04

电话号码的字母组合组合总和II 回溯注意事项(Java)

电话号码的字母组合思路：多个循环可以考虑回溯。首先明确： 循环的宽度是多少，即从哪些区间取数（本题目中每个数字都是3个字母，都是从三个字母中取一个数，所以可以确定循环宽度就是每个数字对应的字符串…...

编程日记 2025/7/18 3:57:58

【软件工程】填空题

真题 2024-10 16.数据字典是用来定义_____中各个成分的具体含义的。 17.模块设计的基本原则是_____。 18.接口是操作的一个集合,其中每个操作描述了类、构件或子系统的一个_____。 19.耦合是指不同模块之间_____的度量。 20.RUP的突出特点是,它是一种以用况为驱动的、…...

编程日记 2025/7/15 6:46:42

回归——数学公式推导全过程

文章目录一、案例引入二、如何求出正确参数 1. 最速下降法 1）多项式回归 2）多重回归 2. 随机梯度下降法一、案例引入以Web广告和点击量的关系为例来学习回归，假设投入的广告费和点击量呈现下图对应关系。思考：如果花了…...

编程日记 2025/7/17 5:32:47

线程池详解：在SpringBoot中的最佳实践

线程池详解：在SpringBoot中的最佳实践引言在Java并发编程中，线程池是一种非常重要的资源管理工具，它允许我们在应用程序中有效地管理和重用线程，从而提高性能并降低资源消耗。特别是在SpringBoot等企业级应用中，正…...

编程日记 2025/7/17 10:55:40

.NET开源的智能体相关项目推荐

一、AntSK 由AIDotNet团队开发的人工智能知识库与智能体框架，支持多模型集成和离线部署能力。核心能力： • 支持OpenAI、Azure OpenAI、星火、阿里灵积等主流大模型，以及20余种国产数据库（如达梦） • 内置语义内核&a…...

编程日记 2025/7/14 8:00:02

spring-security原理与应用系列：ignoredRequests

目录 WebSecurityConfig 何时调用 configure(WebSecurity) AbstractConfiguredSecurityBuilder 如何赋值ignoredRequests 紧接上一篇文章，这一篇我们来看看核心过滤器FilterChainProxy的构造参数对象ignoredRequests是如何被赋值的？ 点击WebSecurity…...

编程日记 2025/7/14 13:42:50

（windows）conda虚拟环境下open-webui安装与启动

一、创建conda环境重点强调下，如果用python pip安装，一定要选择python3.11系列版本，我选的3.11.9。如果你的版本不是这个系列，将会出现一些未知的问题。 conda create -n open-webui python3.11 -y如下就创建好了二、安装o…...

编程日记 2025/7/15 15:34:53

CentOS系统下安装tesseract-ocr5.x版本

CentOS系统下安装tesseract-ocr5.x版本安装依赖包： yum update -y yum install autoconf automake libtool libjpeg-devel libpng-devel libtiff-devel zlib-devel yum install automake libtool bzip2 -y手动编译安装GCC（因系统默认安装的GCC版本比较…...

编程日记 2025/7/16 8:05:49

第五周日志-伪协议（3）

常见读取源码的file，php://filter和各种编码还有执行php的 php://input和各种编码，data 在进行文件包含之前，先定位一下 Flag 文件的位置（这里可以使用工具扫） or直接访问 /flag.php 文件，结果返回为空&…...

编程日记 2025/7/15 1:04:08

飞牛NAS本地部署小雅Alist结合内网穿透实现跨地域远程在线访问观影

文章目录前言1. VMware安装飞牛云（fnOS）1.1 打开VMware创建虚拟机1.3 初始化系统 2. 飞牛云搭建小雅Alist3. 公网远程访问小雅Alist3.1 安装Cpolar内网穿透3.2 创建远程连接公网地址 4. 固定Alist小雅公网地址前言嘿，小伙伴们&#xff0c…...

编程日记 2025/7/17 4:13:24

十七天-Numpy 学习笔记

Numpy 学习笔记 Numpy 作为 Python 中用于进行科学计算的核心库，提供了高性能的多维数组对象，以及大量用于数组操作的工具。下面围绕 “常量”“数据类型”“时间日期和时间增量” 三个方面，梳理 Numpy 中基本的数据概念和数组创建相关知识。…...

编程日记 2025/7/17 23:14:53

浅谈WebSocket-FLV

FLV是一种视频数据封装格式，这种封装被标准通信协议HTTP-FLV和RTMP协议应用。而WebSocket-FLV是一种非标的FLV封装数据从后端发送到前端的一种方式。在WebSocket的url请求中，包含了需要请求设备的视频相关信息，在视频数据到达时&#xff0c…...

编程日记 2025/7/17 11:07:23

milvus-use教程 python

简介项目地址：milvus-use: milvus-use教程 python 需求描述参考vanna项目，获取数据库元数据和问题sql对，存入Milvus向量数据库，之后进行检索，返回相似的数据库表和问题对。本项目采用的嵌入模型为m3e-large。该该…...

编程日记 2025/7/13 1:15:35

Python列表生成式

Python 的列表生成式（List Comprehension） 是一种简洁高效的创建列表的方式，可以用一行代码替代多行循环逻辑。传统的循环的写法 # 循环遍历列表中的每个元素，并将其平方后添加到新的列表中 original [0, 1, 2, 3, 4] squares…...

编程日记 2025/7/19 12:38:39

MATLAB绘图配色包说明

本栏目将分享MATLAB数据分析图表，该贴讲述配色包的使用将配色包colormap_nclCM文件夹添加到路径close all（尽量不要删），使用map colormap(nclCM(309))时会多出来一张空白图片。配色资源来自slandarer；找不到合适颜色…...

编程日记 2025/7/10 12:18:20

Cursor异常问题全解析-无限使用

title: Cursor异常问题全解析无限使用 tags: cursor categories:aiai编程 mathjax: true description: Cursor异常问题全解析与解决方案大全 abbrlink: 64908bd0 date: 2025-03-19 14:48:32 🤖 Assistant 🚨 Cursor异常问题全解析与解决方案大全 &…...

编程日记 2025/7/14 1:23:15

Ubuntu系统保姆级Paperless-ngx部署指南：零基础实现文档云端化管理

文章目录前言1.关于Paperless-ngx2.Docker部署3.简单使用paperless4.安装cpolar内网穿透5. 配置公网地址6. 配置固定公网地址总结前言在当今快节奏的办公环境中，文档管理成为了一个不可忽视的问题。想象一下这样的场景：你需要一份重要的合同&#xf…...

编程日记 2025/7/17 15:08:00

资本运营：基于Python实现的资本运作模拟

基于Python实现的一个简单的资本运营框架； 企业生命周期演示：观察初创→成长→上市→并购全流程行业对比分析：不同行业的财务特征和估值差异资本运作策略：体验IPO定价、投资决策、并购整合等操作市场动态观察&#xff…...

编程日记 2025/7/14 5:55:39

每日总结3.27

蓝桥刷题 1. 团建 （树dfs） #include <bits/stdc.h> using namespace std; const int N200005; int a[N],b[N]; int ans; map<int,vector<int>>m1,m2; void dfs(int x,int y,int count) { if(a[x]!b[y]) {return;} ansmax(ans,c…...

编程日记 2025/7/16 8:43:35

3-2RYU控制器应用程序开发（一）

图1 SDN框架通过利用Ryu框架的丰富功能以及RYU应用程序开发中的事件驱动（装饰器）的编程模型，我们能够开发符合需求的SDN控制器应用程序。通过开发的RYU控制器可以实现各种网络策略控制和管理功能。在SDN软件定义网络编程中，RYU应…...

编程日记 2025/7/15 15:22:36

算法250327题目

1114: 4006 AB问题题目描述给定两个整数A和B，其表示形式是：从个位开始，每三位数用逗号,隔开。现在请计算AB的结果，并以正常形式输出。输入输入包含多组数据，每组数据占一行，由两个整数A和B组成&am…...

编程日记 2025/7/18 6:38:02

数据结构：汉诺塔问题的递归求解和分析

递归方法求解该类问题，是一种简单的思维方法，通常比使用迭代方法更简单。但是，递归方法也有劣势。此处以典型的汉诺塔问题（Tower of Hanoi）为例给予说明。汉诺塔是根据一个传说形成的数学问题，最早是由法国…...

编程日记 2025/7/13 19:43:39

编辑器检视器面板简单扩展2+编辑器检视器面板深度扩展1

枚举检视器面板显示代码： public enum Profession {Warrior0,Wizard } public Profession Pro; //在类中声明小齿轮增加回调函数点击控制台输出： 代码： [ContextMenu("输出攻防比")]public void PrintADProportion(){Debug…...

编程日记 2025/7/16 22:42:19

二分查找模板--从题目中讲解三大二分模板

二分查找的特点：最恶心、细节最多、最容易写出死循环的算法目录 1.朴素的二分模板 1.1题目链接：704.二分查找 1.2题目描述： 1.3算法流程： 1.4算法代码： 1.5朴素二分模板： 2.查找左,右边界的二分模板…...

编程日记 2025/7/16 22:22:19

EF Core 执行原生SQL语句

文章目录前言一、执行查询（返回数据）1） 使用 FromSqlRaw或 FromSqlInterpolated 方法，适用于 DbSet<T>，返回实体集合。2）结合 LINQ 查询3）执行任意原生SQL查询语句（使用ADO.N…...

编程日记 2025/7/2 0:31:07

HiveChat：提升团队协作效率的AI聊天应用

什么是 HiveChat ？ HiveChat 作为一款专为中小团队设计的 AI 聊天应用，支持 Deepseek、Open AI、Claude、Gemini 等模型。管理员一人配置，全团队轻松使用各种 AI 模型。凭借其强大的功能和便捷的操作，有望成为团队沟通协作的得力助…...

编程日记 2025/7/16 18:31:36

python中的继承

目录一、继承单继承多继承方法的重写一、继承在Python中，继承是面向对象编程中的重要概念，它允许一个类（子类）继承另一个类（父类）的属性和方法。子类可以继承父类的属性和方法，并且可…...

编程日记 2025/7/12 21:43:48

Vulnhub靶场FALL靶机通关攻略

1.打开靶机和kali 2.扫描靶机ip 靶机ip为192.168159.158 3.访问下网站翻阅一下可能存在后门网站根目录下可能有线索 4.爆破目录 ir -u http://192.168.159.158 -w /usr/share/wordlists/dirbuster/directory-list-2.3-medium.txt -x .php,.bak,.txt,.sh,.ht…...

编程日记 2025/7/17 1:17:47

背景：

实现效果：

官网链接：点击跳转

核心代码：

组件的属性：

走马灯点击放大：

思路如下：

1、走马灯组件是否有点击事件：

2、自定义图片的点击事件：

实现效果：

核心代码：

点击事件：

图片预览组件：

3、el-image图片组件的点击放大【推荐】：

实现效果：

官网链接：点击跳转

设置代码及效果：

备注：

问：走马灯组件和图片预览组件的代码应该怎么组合使用？

问题：图片为什么显示加载失败？

问题：state.ferryPortdata.photoList响应式变量的数据结构是什么样的？

相关文章：