网站建立安全连接失败,长春互联网公司哪里多,学校网站建设工作领导小组,物联网应用技术是干什么的前言
在做后端管理系统中#xff0c;像弹窗或大的表单时#xff0c;经常会有滚动条的出现#xff0c;但有些时候如流程、图片等操作时#xff0c;仅仅使用鼠标拖动滚动条操作不太方便#xff0c;如果使用鼠标拖拽图片或容器来触发滚动条的移动就比较方便了
功能设计
如…前言
在做后端管理系统中像弹窗或大的表单时经常会有滚动条的出现但有些时候如流程、图片等操作时仅仅使用鼠标拖动滚动条操作不太方便如果使用鼠标拖拽图片或容器来触发滚动条的移动就比较方便了
功能设计
如果要实现鼠标辅助触发滚动条的移动需要借助 mousedownmouseupmousemove 三个事件通过鼠标的移动来动态修改滚动条的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 移动// mouseupmouseleave 松开移出结束移动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添加放大功能
templateel-row classapp-containerel-colel-form refform v-modelvalue label-width80px sizemini styleposition: absolute;top: 32px;z-index: 999;el-form-item label缩放 propvalueel-input-number v-modelvalue changechangeSlider :min0 :max3/el-input-number/el-form-item/el-formdiv idnavShow styletext-align: center;overflow: hidden;height:90vh;border: 1px solid #000000;divsvg idsvgShow stylecursor:pointer;width:96%;height:96%;padding: 10px;/svg/div/div/el-col/el-row
/templatescript
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 0let nav document.getElementById(navShow)// 滚动元素的父容器:刷新滚轮nav.scrollIntoView()},initScroll() {let nav document.getElementById(navShow)new Drag(nav)},}
}
/scriptstyle scoped
/style实现效果
