vue实现PC端图片放大缩小可鼠标拖动,鼠标滚轮控制放大缩小完整代码付效果图

vue实现图片放大缩小可鼠标拖动,鼠标滚轮控制放大缩小完整代码付效果图

效果图:

创建一个ImageViewer 组件,并且在当前页面引用完整代码如下:

代码引用:

<template><view><image-viewer :imageUrl="imageUrl" /></view>
</template><script>
import ImageViewer from '@/components/image-viewer.vue';export default {components: {ImageViewer,},data() {return {imageUrl: 'https://profile-avatar.csdnimg.cn/2c10a3762fec44aea81f7c8fc58921af_qq_35713752.jpg!1', // 替换为你的图片地址};},
};
</script>

组件代码:

<template><view class="container"><view class="movable-area" id="movableArea" @mousedown="startDrag" @mousemove="onDrag" @mouseup="endDrag" @mouseleave="endDrag"><image :src="imageUrl" class="image" :style="{transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`,cursor: dragging ? 'grabbing' : 'grab'}" /></view><view class="controls"><button @click="setScale(5)">放大5倍</button><button @click="setScale(10)">放大10倍</button><button @click="setScale(20)">放大20倍</button><button @click="setScale(30)">放大30倍</button><button @click="incrementScale(0.5)">放大</button><button @click="incrementScale(-0.5)">缩小</button></view></view>
</template><script>export default {props: {imageUrl: {type: String,required: true,},},data() {return {scale: 1,maxScale: 30,translateX: 0,translateY: 0,dragging: false,startX: 0,startY: 0,initialX: 0,initialY: 0,};},mounted() {// 监听滚轮事件this.movableArea = document.getElementById('movableArea');this.movableArea.addEventListener('wheel', this.onWheel);},beforeDestroy() {// 组件销毁前移除监听器this.movableArea.removeEventListener('wheel', this.onWheel);},methods: {onWheel(event) {const delta = event.deltaY > 0 ? -0.5 : 0.5;console.log('delta', event.deltaY);this.incrementScale(delta);},setScale(value) {this.scale = value;},incrementScale(value) {this.scale = Math.min(Math.max(this.scale + value, 1), this.maxScale);},startDrag(event) {this.dragging = true;this.startX = event.clientX;this.startY = event.clientY;this.initialX = this.translateX;this.initialY = this.translateY;document.addEventListener('mousemove', this.onDrag);document.addEventListener('mouseup', this.endDrag);},onDrag(event) {console.log('鼠标移动', this.dragging, event);if (this.dragging) {const deltaX = event.clientX - this.startX;const deltaY = event.clientY - this.startY;this.translateX = this.initialX + deltaX;this.translateY = this.initialY + deltaY;}},endDrag() {this.dragging = false;document.removeEventListener('mousemove', this.onDrag);document.removeEventListener('mouseup', this.endDrag);},},};
</script><style scoped>.container {display: flex;flex-direction: column;align-items: center;}.movable-area {width: 100%;height: 400px;position: relative;overflow: hidden;border: 1px solid #ddd;}.image {user-select: none;width: 100px;height: 100px;}.controls {margin-top: 20px;display: flex;flex-direction: row;justify-content: space-around;width: 100%;}button {padding: 10px;margin: 0 5px;}
</style>

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

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

相关文章

2024年必备技能:智联招聘岗位信息采集技巧全解析

随着大数据时代的发展&#xff0c;精准定位职业机会成为程序员求职的关键。本文将深入解析如何利用Python高效采集智联招聘上的岗位信息&#xff0c;助你在2024年的职场竞争中脱颖而出。通过实战代码示例&#xff0c;揭示网络爬虫背后的秘密&#xff0c;让你轻松掌握这一必备技…

苹果应用程序清理卸载工具:App Cleaner Uninstaller Pro for Mac

App Cleaner & Uninstaller Pro 是一款专为 Mac OS X 操作系统设计的应用程序清理和卸载工具。这款软件的主要功能是帮助用户彻底删除不需要的应用程序、插件和残留文件&#xff0c;从而释放磁盘空间并提高系统性能。 特点和优势&#xff1a; 彻底卸载应用程序&#xff1a;…

历代文学-技术生态-总体介绍

1. 历代文学简介 历代文学&#xff08;https://literature.sinhy.com/#/literature?__c1000&#xff0c;微信小程序可直接搜索“历代文学”&#xff09;是一个由两个人&#xff08;一个后端和一个前端&#xff09;开发的文学网站&#xff0c;是一个收录从古到今、以及古今中外…

几款设计师必备的AI抠图软件工具分享给你!

前言 在图像处理领域&#xff0c;抠图是一项基本而关键的技能。传统上&#xff0c;PS是作为抠图的首选工具&#xff0c;但其操作复杂性往往令初学者望而却步。幸运的是&#xff0c;随着AIGC技术的发展&#xff0c;现在有多款AI软件和在线网站能够以更简单、快捷的方式完成抠图…

VS+Qt+C++点云PCL三维显示编辑系统

程序示例精选 VSQtC点云PCL三维显示编辑系统 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《VSQtC点云PCL三维显示编辑系统》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易…

【wiki知识库】08.添加用户登录功能--后端SpringBoot部分

目录 一、今日目标 二、SpringBoot后端实现 2.1 新增UserLoginParam 2.2 修改UserController 2.3 UserServiceImpl代码 2.4 创建用户上下文工具类 2.5 通过token校验用户&#xff08;重要&#xff09; 2.6 创建WebMvcConfig 2.7 用户权限校验拦截器 一、今日目标 上篇…

【大模型】大模型指令微调的“Prompt”模板

文章目录 一、微调数据集格式二、常用的指令监督微调模板2.1 指令跟随格式&#xff08;Alpaca&#xff09;2.2 多轮对话格式&#xff08;ShareGPT&#xff09;2.3 其他形式2.4 常见模板 参考资料 一、微调数据集格式 在进行大模型微调的过程中&#xff0c;我们会发现“Prompt”…

mysql 日志爆满,删除日志文件,定时清理日志

今天发现网站不能正常访问&#xff0c;于是登陆服务器查找问题。 机智的我随手用命令&#xff1a;df -l 发现 硬盘爆满了&#xff0c;于是就知道问题所在了。 Filesystem 1K-blocks Used Available Use% Mounted on/dev/xvda1 20641404 16963004 16929876 10…

安捷伦N9918A是德keysight N9918B 30khz-26.5g频谱分析仪

Agilent N9918A、Keysight N9918B、 FieldFox 手持式射频和微波组合分析仪&#xff0c;30 kHz - 26.5 GHz 附加功能&#xff1a; 30 kHz 至 26.5 GHz动态范围&#xff1a;100 dBCAT&#xff1a;故障点距离、回波损耗、电缆损耗VNA&#xff1a;S11、S21、S22、S12、幅度和相位…

PMP考试一定要考到3A吗?怎么备考?

PMP&#xff08;Project Management Professional&#xff09;认证是全球公认的项目管理专业人士资格认证&#xff0c;它代表着项目管理领域的高水平标准。 在备考PMP考试时&#xff0c;有些赛宝关心是否需要考到3A&#xff08;即三个领域均为Above Target&#xff0c;超出目标…

GoFly快速开发框架代码市场使用说明

说明 我们框架坚持开源的项目绝不能存在收费项目&#xff0c;所以我们gofly快速开发开源版没有内置代码仓插件&#xff0c;因此需要使用代码市场中的代码包需要再企业版中使用&#xff0c;代码市场插件如下&#xff1a; 图1、社区-代码市场​​​​ 他和企业版管理后台的代码仓…

慢SQL优化的30个思路方案整理

文章目录 &#xff08;1&#xff09;索引优化&#xff08;2&#xff09;查询重构&#xff08;3&#xff09;减少数据扫描量&#xff08;4&#xff09;利用缓存&#xff08;5&#xff09;分区表&#xff08;6&#xff09;优化排序和分组&#xff08;7&#xff09;业务查询条件限…

openfoam模拟时取消报错Floating point exception (core dumped),从而看到具体错误内容

一、理论简介&#xff1a; unset FOAM_SIGFPE 是用于在 OpenFOAM 环境中解除对浮点异常&#xff08;Floating Point Exception, FPE&#xff09;的信号处理。 FOAM_SIGFPE 环境变量的作用 在 OpenFOAM 中&#xff0c;FOAM_SIGFPE 环境变量用于控制程序对浮点异常&#xff08…

【设计模式】设计模式之观察者模式

文章目录 观察者模式什么是观察者模式引入组成UML图代码实现1. 定义观察者接口2. 定义主题接口3. 实现具体观察者4. 实现具体被观察者5.测试 应用场景优点缺点 观察者模式 什么是观察者模式 观察者模式&#xff08;Observer Pattern&#xff09;是一种设计模式 它定义了一种…

BTS4140N:高侧电源开关芯片中文数据手册

芯片概述 &#xff1a; BTS4140N是一款智能高压侧电源开关N沟道垂直功率MOSFET&#xff0c;带电荷泵和电流控制输入、采用智能SIPMOS技术单片集成&#xff0c;提供嵌入式保护和诊断功能。 芯片特征描述 电流控制输入短路保护电流限制欠电压时关断过压保护&#xff08;包括负载突…

【mars3d】GraphicLayer遍历添加数据,正确拿到数据

import * as mars3d from "mars3d"export let map // mars3d.Map三维地图对象 export let graphicLayer // 矢量数据图层 export const mapOptions {scene: {center:{"lat":30.577085,"lng":116.885511,"alt":45203.5,"heading&…

Jenkins参数化构建

目录 一. 准备ansible 二. Gitlab新建子项目 三. Jenkins建立任务&#xff0c;进行初步配置 四. 导入nginx主机的公钥 五. 配置ansible执行脚本 六. 构建测试 一. 准备ansible 在jenkins主机中安装ansible [rootjenkins ~]# yum install -y epel-release [rootjenkins…

【学习笔记】Day 6

一、进度概述 1、《地震勘探原理》第二章 2、“DenseNet” 周报分享 二、详情 1、《地震勘探原理》第二章 注&#xff1a;本来的打算是逐章整理&#xff0c;但是在听老师指导后&#xff0c;明晰了学习目的。故学习方法更改为侧重 “刷” 。不求一遍全弄懂&#xff0c…

AI在商品计划领域的应用

在现代商业环境中&#xff0c;AI驱动的商品计划优化已经成为企业有效管理资源和提高利润的关键因素。 市场预测与库存管理 精准市场预测&#xff1a;以某著名零售品牌为例&#xff0c;该品牌引入了一种基于AI的智能分析工具&#xff0c;帮助实现了精准的市场预测与库存管理。根…

【Linux基础】Linux基本指令(一)

目录 前言一&#xff0c; ls指令二&#xff0c;pwd指令三&#xff0c;cd指令3.1 当前目录与上级目录3.2 绝对路径和相对路径3.3 tree指令 四&#xff0c;创建一个普通文件或目录4.1 touch指令4.2 mkdir指令 五&#xff0c;删除目录或文件5.1 rmdir指令5.2 rm 指令 六&#xff0…