vue中鼠标拖动触发滚动条的移动

前言

在做后端管理系统中,像弹窗或大的表单时,经常会有滚动条的出现,但有些时候如流程、图片等操作时,仅仅使用鼠标拖动滚动条操作不太方便,如果使用鼠标拖拽图片或容器来触发滚动条的移动就比较方便了

功能设计

如果要实现鼠标辅助触发滚动条的移动,需要借助 mousedown,mouseup,mousemove 三个事件,通过鼠标的移动来动态修改滚动条的scrollLeft和scrollTop,来模拟实现滚动条的位置变更。
考虑到鼠标的拖动有独立和可复用性,可以创建一个类来封装鼠标事件,使用时只要把事件挂到指定的容器上,就可以实现功能的复用

1、创建鼠标移动事件类

创建move.js

// 鼠标移动滚动位置类
class Drag {constructor(vm) {this.dragWrap = vm;// 要挂载的容器this._dom = {};this._x = 0;this._y = 0;this._top = 0;this._left = 0;this.move = false;this.down = false;this.init.apply(this, arguments);}// 绑定事件init() {this.bindEvent();}// 给要素增加鼠标事件// mousedown 按下初始化// mousemove 移动// mouseup,mouseleave 松开,移出结束移动bindEvent() {let t = this;this.dragWrap.addEventListener('mousedown', (e) => {e && e.preventDefault();if (!t.move) {t.move = false;t.down = true;t._x = e.clientX;t._y = e.clientY;t._top = t.dragWrap.scrollTop;t._left = t.dragWrap.scrollLeft;}});this.dragWrap.addEventListener('mouseup',  (e) => {e && e.preventDefault();t.move = false;t.down = false;});this.dragWrap.addEventListener('mouseleave',  (e) => {e && e.preventDefault();t.move = false;t.down = false;});this.dragWrap.addEventListener('mousemove',  (e) => {if (t.down) {e && e.preventDefault();t.move = true;let x = t._x - e.clientX;let y = t._y - e.clientY;t.dragWrap.scrollLeft = t._left + x;t.dragWrap.scrollTop = t._top + y;}});}
}
export default Drag;

在页面中使用

1.在页面中使用move.js类,实现鼠标移动触发滚动条位置的移动

2.给svg添加放大功能

<template><el-row class="app-container"><el-col><el-form ref="form" v-model="value" label-width="80px" size="mini" style="position: absolute;top: 32px;z-index: 999;"><el-form-item label="缩放" prop="value"><el-input-number v-model="value" @change="changeSlider" :min="0" :max="3"></el-input-number></el-form-item></el-form><div id="navShow" style="text-align: center;overflow: hidden;height:90vh;border: 1px solid #000000;"><div><svg id="svgShow" style="cursor:pointer;width:96%;height:96%;padding: 10px;"></svg></div></div></el-col></el-row>
</template><script>
import Drag from '@/utils/move.js';
export default {name: 'ProcessingFlow',data() {return {value: 2,}},mounted() {this.changeSlider()this.initScroll()},methods: {changeSlider() {let svg = document.getElementById('svgShow')if (this.value === 1) {svg.style.transform = 'scale(1.6)'} else if (this.value === 2) {svg.style.transform = 'scale(1.9)'} else if (this.value === 3) {svg.style.transform = 'scale(2.2)'} else {svg.style.transform = 'scale(1)'}svg.style.transformOrigin = ' 0 0'let nav = document.getElementById('navShow')// 滚动元素的父容器:刷新滚轮nav.scrollIntoView()},initScroll() {let nav = document.getElementById('navShow')new Drag(nav)},}
}
</script><style scoped>
</style>

实现效果

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

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

相关文章

LeetCode(454)四数相加 II⭐⭐

给定四个包含整数的数组列表 A , B , C , D ,计算有多少个元组 (i, j, k, l) &#xff0c;使得 A[i] B[j] C[k] D[l] 0。 为了使问题简单化&#xff0c;所有的 A, B, C, D 具有相同的长度 N&#xff0c;且 0 ≤ N ≤ 500 。所有整数的范围在 -2^28 到 2^28 - 1 之间&#…

Pinia处学习

修改数据的三种方式: mutate本次变化的数据,state时store中的数据

大模型训练营Day2 homework

1.使用 InternLM-Chat-7B 模型生成 300 字的小故事 2.熟悉 hugging face 下载功能&#xff0c;使用 huggingface_hub python 包&#xff0c;下载 InternLM-20B 的 config.json 文件到本地&#xff1a; 下面开始下载和推广大模型的相关的包&#xff1a; 这里需要在本地上&…

uniapp自定义底部导航栏

1.新建 nav-custom.vue组件 <template><view class"nav-box" :style"{height:heightpx,background:bgColor}"><!-- 自定义导航栏 --><view class"status_bar" :style"{height:statusBarHeightpx}"><!-- u…

@Transactional 事务注解

第一、先简单介绍一下Spring事务的传播行为 所谓事务的传播行为是指&#xff0c;如果在开始当前事务之前&#xff0c;一个事务上下文已经存在&#xff0c;此时有若干选项可以指定一个事务性方法的执行行为。在TransactionDefinition定义中包括了如下几个表示传播行为的常量&…

HarmonyOS应用开发学习笔记 UIAbility组件间交互 UIAbility启动,页面跳转结果回调

1、 HarmoryOS Ability页面的生命周期 2、 Component自定义组件 3、HarmonyOS 应用开发学习笔记 ets组件生命周期 4、HarmonyOS 应用开发学习笔记 ets组件样式定义 Styles装饰器&#xff1a;定义组件重用样式 Extend装饰器&#xff1a;定义扩展组件样式 5、HarmonyOS 应用开发…

MySQL的体系结构(超全总结版)

MySQL组成 连接池组件管理服务和工具组件SQL接口组件查询分析器组件优化器组件缓冲组件插件式存储引擎物理文件 存储引擎 InnoDB存储引擎 主要面向OLTP(在线事务处理)方面的应用&#xff0c;特点是行锁设计、支持外键&#xff0c;默认情况下读取操作不会产生锁。通过使用多…

Centos7下升级gcc/g++版本(简单 + 避坑)

在 Centos7 下&#xff0c;使用 yum 安装高版本的 gcc/g 最简单&#xff1a; yum -y install centos-release-scl yum -y install devtoolset-11-gcc devtoolset-11-gcc-c devtoolset-11-binutils需要安装哪个个版本的gcc/g&#xff0c;就把数字替换成对应的版本号。例如上面代…

船舶3d虚拟展厅线上制作降低展示成本

VR线上虚拟展厅漫游搭建平台是一种新兴的技术&#xff0c;它能够为用户提供更加真实、沉浸式的体验。目前&#xff0c;市场上有许多公司提供VR线上虚拟展厅漫游搭建平台技术服务&#xff0c;为客户提供全方位的支持。 首先&#xff0c;这些公司通常会提供专业的策划和设计服务。…

TCP三次握手过程?

TCP三次握手过程&#xff1f; 分享 回答 1 浏览 3662 一颗小胡椒 2 CISM-WSE CISP-PTS 三次握手是 TCP 连接的建立过程。在握手之前&#xff0c;主动打开连接的客户端结束 CLOSE 阶段&#xff0c;被动打开的服务器也结束 CLOSE 阶段&#xff0c;并进入 LISTEN 阶段。随后进入…

常见的硬件连通性测试方法有哪些?

硬件连通性测试是确保硬件系统正常运行的关键一环。通过采用电气测试、数据传输测试和信号完整性测试等方法&#xff0c;可以有效发现和解决硬件连接中的问题&#xff0c;提高系统的可靠性和性能。 1、电气测试 通过使用示波器、多用途表等工具&#xff0c;对硬件设备的电气参数…

二进制部署

HOST HostnameIP地址flannedAPPmaster192.169.116.10ETCD\APIserver\Scheduler\Controller-Managernode1192.168.116.11172.17.28.0ETCD,Flanned,Kubelet,kube-proxynode2192.168.116.12172.17.26.0ETCD,Flanned,Kubelet,kube-proxy Kubernetes社区 Kubernetes文档 ETCD mas…

大模型时代:AI原生企业的崛起

导读&#xff1a;当前&#xff0c;以大模型为代表的人工智能技术已成为驱动经济社会发展、提升国家竞争力的关键要素&#xff0c;并以前所未有的速度重塑产业的新格局、驱动经济发展的新方向&#xff0c;并展现出强大的赋能效应&#xff0c;给千行百业带来“质量与效率”的变革…

ORPC-824,对标可替代ACPL-824/PC824等

提供隔离反馈 逻辑电路之间的接口 电平转换 DC和AC输入 SMPS中的调节反馈电路 消除接地环路 特征 电流传输比 &#xff08; CTR &#xff1a; 最低 20% 在 IF 1mA&#xff0c; VCE 5V &#xff09; 宽工作温度范围 -55~110C 高输入输出隔离电压 &#xff08; Viso 5&am…

怎么批量创建多个文件夹并命名?

怎么批量创建多个文件夹并命名&#xff1f;在日常的文件管理中&#xff0c;有时候我们需要批量创建多个文件夹并给它们命名&#xff0c;以便更好地组织和分类我们的文件。无论是在工作中还是个人使用中&#xff0c;批量创建文件夹可以帮助我们更高效地整理和管理文件。想象一下…

游戏引擎支持脚本编程有啥好处

很多游戏引擎都支持脚本编程。Unity、Unreal Engine、CryEngine等大型游戏引擎都支持使用脚本编写游戏逻辑和功能。脚本编程通常使用C#、Lua或Python等编程语言&#xff0c;并且可以与游戏引擎的API进行交互来控制游戏对象、设置变量、执行行为等。使用脚本编程&#xff0c;游戏…

安达发APS|超级BOM是什么?

超级BOM&#xff08;Bill of Materials&#xff09;是一种在制造业中广泛使用的工具&#xff0c;用于管理和控制产品的制造过程。它包含了制造一个产品所需的所有原材料、零部件、组件和组装件的清单&#xff0c;以及它们的数量和规格。超级BOM不仅包括直接用于产品制造的物料&…

2024.1.8 关于 Redis 数据类型 Zset 集合命令、编码方式、应用场景

目录 引言 Zset 集合命令 ZINTERSTORE ZUNIONSTORE Zset 编码方式 Zset 应用场景 排行榜系统 引言 在 Redis 中集合间操作无非就是 交集、并集、差集 Set 类型与之相对应的操作命令为 sinter、sunion、sdiff 注意&#xff1a; 从 Redis 6.2 版本开始&#xff0c;Zset 命…

mariadb实现主从同步

准备两台服务器 Mariadb-Master&#xff1a;192.168.44.150 Mariadb-Backup&#xff1a;192.168.44.148 安装mariadb&#xff1a; https://blog.csdn.net/qq_50247813/article/details/135402502?spm1001.2014.3001.5502 组从复制原理如下 修改主数据库配置如下 vi /etc/my.…

游戏、设计选什么内存条?光威龙武系列DDR5量大管饱

如果你是一位PC玩家或者创作者&#xff0c;日常工作娱乐中&#xff0c;确实少不了大容量高频内存的支持&#xff0c;这样可以获得更高的工作效率&#xff0c;光威龙武系列DDR5内存条无疑是理想之选。它可以为计算机提供强劲的性能表现和稳定的运行体验&#xff0c;让我们畅玩游…