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实现放大镜效果
效果图如下: 1. 首先,使用npm或yarn安装vab-magnifier插件: npm install vab-magnifier或 yarn add vab-magnifier2. 在Vue组件中引入vab-magnifier插件: import VabMagnifier from vab-magnifier; import vab-magnifier/lib…...
无涯教程-jQuery - Highlight方法函数
Highlight 效果可以与effect()方法一起使用。这将以特定的颜色突出显示元素的背景,默认为黄色(yellow)。 Highlight - 语法 selector.effect( "highlight", {arguments}, speed ); 这是所有参数的描述- color - 高亮显示颜色。默认值为"#fff…...
【bar堆叠图形绘制】
绘制条形图示例 在数据可视化中,条形图是一种常用的图表类型,用于比较不同类别的数据值。Python的matplotlib库为我们提供了方便易用的功能来绘制条形图。 1. 基本条形图 首先,我们展示如何绘制基本的条形图。假设我们有一个包含十个类别的…...
ORACLE数据库灾难恢复
一:RMAN恢复 .1 创建测试用户,授权,分配测试表空间,给测试数据 –创建测试用户: 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的二次开发,需要Visual Studio版本需要与ArcGIS Engine对应,Visual Studio版本的或高或低都不能使ArcObjects SDK for microsoft.Net framework安装成功。下面是各个版本的对照表。 序号ArcEngine版本visual Studio版本Network版本110.…...
JPA连接达梦数据库导致auto-ddl失效问题解决
现象: 项目使用了JPA,并且auto-ddl设置的为update,在连接达梦数据库的时候,第一次启动没有问题,但是后面重启就会报错,发现错误为重复建表,也就是说已经建好的表没有检测到,…...
【MATLAB第60期】【更新中】基于MATLAB的ARMAX具有外生回归因子的移动平均自回归模型
【MATLAB第60期】【更新中】基于MATLAB的ARMAX具有外生回归因子的移动平均自回归模型 版本更新: 2023/7/29版本: 1.增加自定义参数,方便直接套数据运行。 pre_num3;%预采样数据个数 learn_pr0.85; %训练数据比例(不包括预采样数…...
Vue 常用指令 v-on 自定义参数,事件修饰符
自定义参数就是可以在触发事件的时候传入自定义的值。 文本框,绑定了一个按钮事件,对应的逻辑是sayhi,现在无论按下什么按钮都会触发这个sayhi。但是实际上不是所有的按钮都会触发,只会限定某一些按钮,最常见的按钮就…...
重要通知|关于JumpServer开源堡垒机V2版本产品生命周期的相关说明
JumpServer(https://github.com/jumpserver)开源项目创立于2014年6月,已经走过了九年的发展历程。经过长期的产品迭代,JumpServer已经成为广受欢迎的开源堡垒机。 JumpServer堡垒机遵循GPL v3开源许可协议,是符合4A&a…...
下载快 kaggle output
下载快 kaggle output 文档:下载快 kaggle output.note 链接:http://note.youdao.com/noteshare?id0e89033f5675252add0a39ee97b6f060&sub63D673D0AD224FC581CC30627B4E2ED8 添加链接描述 但是 数据集下载慢 input 里面下载数据集 也是慢的 数据集…...
结构型设计模式-1.代理设计模式
结构型设计模式-1.代理设计模式 结构型设计模式:利用类与类之间的关系(继承、组合),形成一种类与类之间的结构,通过这种结构提高代码的可拓展性、可维护性和可重用性。 一、简介 代理设计模式(Proxy Des…...
Python(四十九)获取列表指定元素的索引
❤️ 专栏简介:本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中,我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 :本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…...
年轻人的第一套海景房
前段时间新房装修,我把书房设计成工作室的风格,并自己装配了一台电脑,本文是对电脑选购与装配的一则经验贴,仅包含我对计算机硬件的浅薄理解。 配件选购 装机契源 事实上,很多电脑店都提供装配和测试服务,…...
Vue输入内容/链接生成二维码
方式一:qrcode(无 icon 图标) npm i qrcodejs2 --save完整代码 <template><div class"flex-box"><div>qrcode(无 icon 图标)</div><div class"qr-code" ref"qrCo…...
使用langchain与你自己的数据对话(二):向量存储与嵌入
之前我以前完成了“使用langchain与你自己的数据对话(一):文档加载与切割”这篇博客,没有阅读的朋友可以先阅读一下,今天我们来继续讲解deepleaning.AI的在线课程“LangChain: Chat with Your Data”的第三门课:向量存储与嵌入。 …...
No105.精选前端面试题,享受每天的挑战和学习
文章目录 手写new手写Mapget和post区别发起post请求的时候,服务端是怎么解析你的body的(content-type),常见的content-type都有哪些,发文件是怎么解析的(FormData),如果多个文件&…...
【计算机网络】第 3 课 - 计算机网络体系结构
欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、常见的计算机网络体系结构 2、计算机网络体系结构分层的必要性 2.1、物理层 2.2、数据链路层 2.3、网路层 2.4、运输层 2…...
精细呵护:如何维护自己的电脑,提升性能和寿命
导语: 在当今数字化时代,电脑已经成为我们日常生活和工作的必需品。然而,就像任何其他设备一样,电脑需要得到适当的维护和保养,以保持良好的性能和延长使用寿命。在本文中,我们将分享一些简单而有效的方法&…...
DevOps-Jenkins
Jenkins Jenkins是一个可扩展的持续集成引擎,是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能。 官网 应用场景 场景一 研发人员上传开发好的代码到github代码仓库需要将代码下载nginx服务器部署手动下载再…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)
参考官方文档:https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java(供 Kotlin 使用) 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
SQL Server 触发器调用存储过程实现发送 HTTP 请求
文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...
