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

vue中使用vab-magnifier实现放大镜效果

效果图如下:
在这里插入图片描述

1. 首先,使用npm或yarn安装vab-magnifier插件:
npm install vab-magnifier

yarn add vab-magnifier
2. 在Vue组件中引入vab-magnifier插件:
import VabMagnifier from 'vab-magnifier';
import 'vab-magnifier/lib/vab-magnifier.css'export default {components: {VabMagnifier},
}
3. 在模板中使用vab-magnifier组件:
<template><div><el-card><div class="out-box"><div class="item" v-for="item in imgSrc" :key="item"><vab-magnifier type="circle" :url="item" style="width:100%;height:260px;" :width="150"></vab-magnifier></div></div></el-card></div>
</template>

其中,url是需要放大的图片的路径

4.数据存放
export default {data() {return {imgSrc: [require("../../assets/person.jpg"),require("../../assets/person2.webp"),],}}},
}

所有代码如下:

<template><div><el-card><div class="out-box"><div class="item" v-for="item in imgSrc" :key="item"><vab-magnifier type="circle" :url="item" style="width:100%;height:260px;" :width="150"></vab-magnifier></div></div></el-card></div>
</template><script>
import VabMagnifier from 'vab-magnifier';
import 'vab-magnifier/lib/vab-magnifier.css'export default {components: {VabMagnifier},data() {return {imgSrc: [require("../../assets/person.jpg"),require("../../assets/person2.webp"),],}}
}
</script><style lang="less" scoped>
::v-deep .el-card {.out-box {display: flex;gap: 20px;.item {width: 25%;img {object-fit: cover;aspect-ratio: 1;object-position: center;}}}
}
</style>

相关文章:

vue中使用vab-magnifier实现放大镜效果

效果图如下&#xff1a; 1. 首先&#xff0c;使用npm或yarn安装vab-magnifier插件&#xff1a; npm install vab-magnifier或 yarn add vab-magnifier2. 在Vue组件中引入vab-magnifier插件&#xff1a; import VabMagnifier from vab-magnifier; import vab-magnifier/lib…...

无涯教程-jQuery - Highlight方法函数

Highlight 效果可以与effect()方法一起使用。这将以特定的颜色突出显示元素的背景&#xff0c;默认为黄色(yellow)。 Highlight - 语法 selector.effect( "highlight", {arguments}, speed ); 这是所有参数的描述- color - 高亮显示颜色。默认值为"#fff…...

【bar堆叠图形绘制】

绘制条形图示例 在数据可视化中&#xff0c;条形图是一种常用的图表类型&#xff0c;用于比较不同类别的数据值。Python的matplotlib库为我们提供了方便易用的功能来绘制条形图。 1. 基本条形图 首先&#xff0c;我们展示如何绘制基本的条形图。假设我们有一个包含十个类别的…...

ORACLE数据库灾难恢复

一&#xff1a;RMAN恢复 .1 创建测试用户&#xff0c;授权&#xff0c;分配测试表空间&#xff0c;给测试数据 –创建测试用户&#xff1a; SQL> alter session set containerPRODPDB; Session altered. SQL> SQL> show con_name; CON_NAME PRODPDB SQL> cre…...

base和正则备份

js图片网络地址转file文件_朱1只的博客-CSDN博客 JavaScript 图片url地址转base64_图片地址转base64_vanora1111的博客-CSDN博客 前端常用正则表达式(详细版)_前端正则表达式匹配字符串_Ultraman_agul的博客-CSDN博客...

ArcGIS Engine 与 Visual Studio版本对照表

通过C#对于Arcgis的二次开发&#xff0c;需要Visual Studio版本需要与ArcGIS Engine对应&#xff0c;Visual Studio版本的或高或低都不能使ArcObjects SDK for microsoft.Net framework安装成功。下面是各个版本的对照表。 序号ArcEngine版本visual Studio版本Network版本110.…...

JPA连接达梦数据库导致auto-ddl失效问题解决

现象&#xff1a; 项目使用了JPA&#xff0c;并且auto-ddl设置的为update&#xff0c;在连接达梦数据库的时候&#xff0c;第一次启动没有问题&#xff0c;但是后面重启就会报错&#xff0c;发现错误为重复建表&#xff0c;也就是说已经建好的表没有检测到&#xff0c;…...

【MATLAB第60期】【更新中】基于MATLAB的ARMAX具有外生回归因子的移动平均自回归模型

【MATLAB第60期】【更新中】基于MATLAB的ARMAX具有外生回归因子的移动平均自回归模型 版本更新&#xff1a; 2023/7/29版本&#xff1a; 1.增加自定义参数&#xff0c;方便直接套数据运行。 pre_num3;%预采样数据个数 learn_pr0.85; %训练数据比例&#xff08;不包括预采样数…...

Vue 常用指令 v-on 自定义参数,事件修饰符

自定义参数就是可以在触发事件的时候传入自定义的值。 文本框&#xff0c;绑定了一个按钮事件&#xff0c;对应的逻辑是sayhi&#xff0c;现在无论按下什么按钮都会触发这个sayhi。但是实际上不是所有的按钮都会触发&#xff0c;只会限定某一些按钮&#xff0c;最常见的按钮就…...

重要通知|关于JumpServer开源堡垒机V2版本产品生命周期的相关说明

JumpServer&#xff08;https://github.com/jumpserver&#xff09;开源项目创立于2014年6月&#xff0c;已经走过了九年的发展历程。经过长期的产品迭代&#xff0c;JumpServer已经成为广受欢迎的开源堡垒机。 JumpServer堡垒机遵循GPL v3开源许可协议&#xff0c;是符合4A&a…...

下载快 kaggle output

下载快 kaggle output 文档&#xff1a;下载快 kaggle output.note 链接&#xff1a;http://note.youdao.com/noteshare?id0e89033f5675252add0a39ee97b6f060&sub63D673D0AD224FC581CC30627B4E2ED8 添加链接描述 但是 数据集下载慢 input 里面下载数据集 也是慢的 数据集…...

结构型设计模式-1.代理设计模式

结构型设计模式-1.代理设计模式 结构型设计模式&#xff1a;利用类与类之间的关系&#xff08;继承、组合&#xff09;&#xff0c;形成一种类与类之间的结构&#xff0c;通过这种结构提高代码的可拓展性、可维护性和可重用性。 一、简介 代理设计模式&#xff08;Proxy Des…...

Python(四十九)获取列表指定元素的索引

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…...

年轻人的第一套海景房

前段时间新房装修&#xff0c;我把书房设计成工作室的风格&#xff0c;并自己装配了一台电脑&#xff0c;本文是对电脑选购与装配的一则经验贴&#xff0c;仅包含我对计算机硬件的浅薄理解。 配件选购 装机契源 事实上&#xff0c;很多电脑店都提供装配和测试服务&#xff0c…...

Vue输入内容/链接生成二维码

方式一&#xff1a;qrcode&#xff08;无 icon 图标&#xff09; npm i qrcodejs2 --save完整代码 <template><div class"flex-box"><div>qrcode&#xff08;无 icon 图标&#xff09;</div><div class"qr-code" ref"qrCo…...

使用langchain与你自己的数据对话(二):向量存储与嵌入

之前我以前完成了“使用langchain与你自己的数据对话(一)&#xff1a;文档加载与切割”这篇博客&#xff0c;没有阅读的朋友可以先阅读一下&#xff0c;今天我们来继续讲解deepleaning.AI的在线课程“LangChain: Chat with Your Data”的第三门课&#xff1a;向量存储与嵌入。 …...

No105.精选前端面试题,享受每天的挑战和学习

文章目录 手写new手写Mapget和post区别发起post请求的时候&#xff0c;服务端是怎么解析你的body的&#xff08;content-type&#xff09;&#xff0c;常见的content-type都有哪些&#xff0c;发文件是怎么解析的&#xff08;FormData&#xff09;&#xff0c;如果多个文件&…...

【计算机网络】第 3 课 - 计算机网络体系结构

欢迎来到博主 Apeiron 的博客&#xff0c;祝您旅程愉快 &#xff01; 时止则止&#xff0c;时行则行。动静不失其时&#xff0c;其道光明。 目录 1、常见的计算机网络体系结构 2、计算机网络体系结构分层的必要性 2.1、物理层 2.2、数据链路层 2.3、网路层 2.4、运输层 2…...

精细呵护:如何维护自己的电脑,提升性能和寿命

导语&#xff1a; 在当今数字化时代&#xff0c;电脑已经成为我们日常生活和工作的必需品。然而&#xff0c;就像任何其他设备一样&#xff0c;电脑需要得到适当的维护和保养&#xff0c;以保持良好的性能和延长使用寿命。在本文中&#xff0c;我们将分享一些简单而有效的方法&…...

DevOps-Jenkins

Jenkins Jenkins是一个可扩展的持续集成引擎&#xff0c;是一个开源软件项目&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件的持续集成变成可能。 官网 应用场景 场景一 研发人员上传开发好的代码到github代码仓库需要将代码下载nginx服务器部署手动下载再…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...