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,一经查实,立即删除!

相关文章

5分钟带你了解RESTful

RESTful API是一种基于HTTP协议的API设计风格&#xff0c;它以资源为核心&#xff0c;通过URL来访问和操作资源的状态。RESTful API遵循一些约定俗称的规则&#xff0c;包括使用HTTP动词&#xff08;GET、POST、PUT、DELETE等&#xff09;来操作资源&#xff0c;使用HTTP状态码…

开源软件运维安全防护的六个手段

开源&#xff0c;顾名思义&#xff0c;即开放软件源代码。代码贡献者可将自己编写的程序提交到开源社区的公开平台上&#xff0c;其他代码开发者如有类似的功能需求可以不必再自己动脑动手编写代码&#xff0c;而是直接集成、修改或应用贡献者公开的代码。 开源软件是通过特定…

深圳公司减资 深圳公司变更 深圳公司减资流程

新公司法从2024年7月1日起&#xff0c;全体股东需要在公司成立之日起五年内缴足认缴的出资额。这一变革在社会上引发了广泛的关注和热议。 如果您公司注册资金巨大&#xff0c;数千万甚至上亿&#xff0c;那么到了出资期限后&#xff0c;股东出资可能会面临困难。此时&#xf…

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中的数据

LeetCode每周五题_2024/01/08~01/12

文章目录 447. 回旋镖的数量 [01/08]题目题解 2707. 字符串中的额外字符 [01/09]题目题解 447. 回旋镖的数量 [01/08] 447. 回旋镖的数量 题目 给定平面上 n 对 互不相同 的点 points &#xff0c;其中 points[i] [xi, yi] 。回旋镖 是由点 (i, j, k) 表示的元组 &#xff0…

大模型训练营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;默认情况下读取操作不会产生锁。通过使用多…

布隆过滤器的原理

布隆过滤器&#xff08;Bloom Filter&#xff09;是由Burton Howard Bloom在1970年提出的一种空间效率很高的概率型数据结构&#xff0c;它用来测试一个元素是否在一个集合中。布隆过滤器可以非常快速地进行插入和查询操作&#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;对硬件设备的电气参数…

记一次线上报错 GList AddChildAt NullReferenceException

文章目录 问题描述分析结果总结 问题描述 后台日志大量报错&#xff0c;去主干看无法复现 c# exception:System.NullReferenceException: Object reference not set to an instance of an object. at FairyGUI.GCompone nt.AddChildAt (FairyGUI.GObject child, System.Int32 …

make的基本操作

./configure --with-name地址 &#xff08;相关库的安装路径&#xff09; make -jn //n指定最大核数 sudo make install //也可以指定安装目录 make install prefix路径 sudo ldconfig

二进制部署

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…

微信小程序canvas画布自由绘制/画笔功能实现

.wxml <canvas class="canvas" type="2d" id="myCanvas" bindtouchstart="update_edit_position" bindtouchmove="brush"/> .wxss 定义画布显示样式 .canvas{background-color: white;height: 65vh;width: 100%;m…