vue实现鼠标框选功能

  经手的项目中需要实现鼠标的框选功能,just do it!

  首先先实现鼠标拖拽,创建框选范围的div。

  遇到问题是mousedown事件和mousemove事件之间的冲突

  mousemove事件卸载mousedown事件里面,且一定要加上mouseup,不能直接在元素中添加,元素中添加mousedown。

  

 1 mousedown(e) {
 2       var create = document.createElement("div")
 3       $('.form_cont').append(create)
 4       document.onmousemove = e => {
 5         let left = e.clientX;
 6         let right = e.clientY;
 7         create.style.width = left + "px"
 8         create.style.height = right + "px"
 9         console.log("鼠标X是"+left, "Y是"+right);
10       };
11       document.onmouseup = e => {
12         create.remove()
13         document.onmousemove = null;
14         document.onmouseup = null;
15       };
16     }

  

posted @ 2022-06-17 15:43  艾弗森i  阅读(2438)  评论(0)    收藏  举报