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>

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

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

相关文章

Element UI如何自定义样式

简介 Element UI是一套非常完善的前端组件库&#xff0c;但是如何个性化定制其中的组件样式呢&#xff1f;今天我们就来聊一聊这个 举例 就拿最常见的按钮el-button来举例&#xff0c;一般来说默认是蓝底白字。效果图如下 可是我们想个性化定制&#xff0c;让他成为粉底红字应…

ElasticSearch_学习笔记

一、初始elasticsearch 什么是elasticsearch&#xff1f; 一个开源的分布式搜索引擎&#xff0c;可以用来时限搜素、日志统计、分析、系统监控等功能。什么是elasitc stack&#xff08;ELK&#xff09;&#xff1f; 是以elasticsearch为核心的技术栈&#xff0c;包括 beats、L…

JAVA基础原理篇_1.1—— 关于JVM 、JDK以及 JRE

目录 一、关于JVM 、JDK以及 JRE 1. JVM 2. JDK 3. JRE 二、为什么说 Java 语言“编译与解释并存”&#xff1f; 2.2 将高级编程语言按照程序的执行方式分为两种&#xff1a; 2.2 Java的执行过程&#xff1a; 2.3 所以为什么Java语言“编译与解释"共存&#xff1a…

【已解决】电脑连上网线但无法上网

文章目录 案例情况解决方案必要的解决方法简要概括详细步骤1、打开控制面板2、打开更改适配器设置3、 找Internet协议版本44、修改配置 可能有用的解决方法 问题解决原理Internet 协议版本 4&#xff08;TCP/IPv4&#xff09;确保IP地址和DNS服务器设置为自动获取 案例情况 网…

《翻开收藏夹,拾起行动的力量》

文章目录 每日一句正能量前言分享一道收藏的好题分享一个收藏的便捷技巧积灰这么久&#xff0c;这个当时被收藏的东西对现在的你还有用吗&#xff1f;后记 每日一句正能量 很喜欢一个字&#xff0c;淡&#xff0c;平淡的淡&#xff0c;其实很不平淡&#xff0c;蕴含着很多人生哲…

SpringBoot基础篇-在IDEA中隐藏文件或文件夹(超详细版)

正常创建一个SpringBoot项目有如下文件&#xff1a; 通常我们创建一个springboot项目时会自动生成一些暂时用不到的文件&#xff0c;稍许有些碍眼&#xff0c;对于喜爱项目结构整洁清晰的人更是十分别扭&#xff0c;但那些文件可能后面又会用到&#xff0c;所以这里给一个小技巧…

51单片机——串行口通信

目录 1、51单片机串口通信介绍 2、串行口相关寄存器 2.1 、串行口控制寄存器SCON和PCON 2.1.1 SCON&#xff1a;串行控制寄存器 (可位寻址) 2.1.2 PCON&#xff1a;电源控制寄存器&#xff08;不可位寻址&#xff09; 2.2、串行口数据缓冲寄存器SBUF 2.3、从机地址控制…

链表刷题常用技巧——快慢指针

强大&#xff0c;不动如山的强大&#xff0c;不会输给自己的真正的强大。 往期回顾&#xff1a; 数据结构——单链表 单链表力扣刷题 文章目录 经典例题&#xff1a;链表的中间结点 题目分析及双指针思路引入 双指针图解 leetcode 核心代码 判断环形链表——快慢指针…

Ubuntu Server版 之 apache系列 安装、重启、开启,版本查看

安装之前首先要检测是否安装过 apt list --installed | grep tool tool&#xff1a;要检测的名称&#xff0c;如mysql、apache 、ngnix 等 安装 apache sudo apt install apache2 安装apache 默认是开启的 可以通过浏览器 检测一下 service apache stop # apache 停止服务…

PSP - 蛋白质序列搜索算法 MMseqs2 与 HHblits 的搜索结果差异

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132025401 在 AlphaFold2 中&#xff0c;使用 HHblits 算法搜索 BFD 与 UniRef30&#xff0c;输出 bfd_uniref_hits.a3m 文件。MMseqs2 优化搜索速…

复习之linux高级存储管理

一、lvm----逻辑卷管理 1.lvm定义 LVM是 Logical Volume Manager&#xff08;逻辑卷管理&#xff09;的简写&#xff0c;它是Linux环境下对磁盘分区进行管理的一种机制。 逻辑卷管理器(LogicalVolumeManager)本质上是一个虚拟设备驱动&#xff0c;是在内核中块设备和物理设备…

【C++】STL中list的模拟实现(增删查改,迭代器封装,运算符重载)

文章目录 前言大体框架&#xff1a; 一、节点的封装&#xff08;list_node&#xff09;二、迭代器的封装(_list_iterator)1.类模板的定义&#xff1a;2.构造函数3.前置&#xff0c;后置4.前置--&#xff0c;后置--5.解引用(operator*())6. ->重载&#xff08;operator- >…

【腾讯云 Cloud Studio 实战训练营】永不宕机的IDE,Coding Everywhere

【腾讯云 Cloud Studio 实战训练营】永不宕机的IDE&#xff0c;随时随地写代码&#xff01; 写在最前视频讲解&#xff1a;Cloud Studio活动简介何为腾讯云 Cloud Studio?Cloud Studio简介免费试用&#xff0c;上手无忧Cloud Studio 特点及优势云端开发多种预制环境可选metawo…

ansible自动化运维(二)剧本、角色编写实战

&#x1f618;作者简介&#xff1a;一名运维工作人员。 &#x1f44a;宣言&#xff1a;人生就是B&#xff08;birth&#xff09;和D&#xff08;death&#xff09;之间的C&#xff08;choise&#xff09;&#xff0c;做好每一个选择。 &#x1f64f;创作不易&#xff0c;动动小…

计数排序算法

计数排序 计数排序说明&#xff1a; 计数排序&#xff08;Counting Sort&#xff09;是一种非比较性的排序算法&#xff0c;它通过统计元素出现的次数&#xff0c;然后根据元素出现的次数将元素排列在正确的位置上&#xff0c;从而实现排序。计数排序适用于非负整数或者具有确…

动态sql以及常用的标签

什么是动态sql&#xff1a; 指根据不同的条件生成不同的sql 搭建环境&#xff1a; 建表&#xff1a; create table blog( id varchar(50) not null comment 博客id, title varchar(100) not null comment 博客标题, author varchar(30) not null comment 博客作者, create_ti…

yolo系列笔记(v4-v5)

YOLOv4 YOLOv4网络详解_哔哩哔哩_bilibili 网络结构&#xff0c;在Yolov3的Darknet的基础上增加了CSP结构。 CSP的优点&#xff1a; 加强CNN的学习能力 去除计算瓶颈。 减少显存的消耗。 结构为&#xff1a; 、 其实还是类似与残差网络的结构&#xff0c;保留下采样之前…

分析npm run serve之后发生了什么?

首先需要明白的是&#xff0c;当你在终端去运行 npm run ****&#xff0c;会是什么过程。 根据上图的一个流程&#xff0c;就可以衍生出很多问题。 1&#xff0c;为什么不直接运行vue-cli-service serve? 因为直接运行 vue-cli-service serve&#xff0c;会报错&#xff0c…

【已解决】如果将MySQL数据库中的表生成PDM

数据库表PDM关系图 | 原创作者/编辑&#xff1a;凯哥Java | 分类&#xff1a;经验分享 有时候&#xff0c;我们需要MySQL数据库中的表生成对应的PDM文件&#xff0c;这里凯哥就讲讲第一种将MySQL数据库的表生成对应的PDM文件。 环境准备&#xff1a; MySQL数据库连接客户端&…

<el-date-picker>组件选择开始时间,结束时间自动延长30min

背景&#xff1a;选择开始时间&#xff0c;结束时间自动增加30分钟&#xff0c;结束时间也可重新选择&#xff0c;如图&#xff1a; <el-form-item label"预约开始时间" prop"value1"><el-date-pickersize"large"v-model"ruleForm…