ue自定義指令——v可拖拽的彈窗
阿新 • • 發佈:2021-12-15
新建一個js檔案放指令資料夾
import Vue from "vue"; const drag = Vue.directive("drag", { //只執行一次 bind: function(el, bind) { el.style.cursor = "move"; //滑鼠樣式變move樣式 }, //inserted函式表示當綁定了該指令的元素被插入到dom時候會自動觸發 inserted: function (el) { //滑鼠落下 el.onmousedown = function (e) { var distX = e.pageX - el.offsetLeft;var distY = e.pageY - el.offsetTop; if (e.preventDefault) { e.preventDefault(); } else{ e.returnValue=false; };//解決快速拖動滯後問題 滑鼠移動 document.onmousemove = function (e) { // 用滑鼠的位置減去滑鼠相對元素的位置,得到元素的位置 let left = e.clientX - distX; let top= e.clientY - distY; if (left <= 0) { left = 5; //設定成5是為了不離邊緣太近 } else if (left > document.documentElement.clientWidth - el.clientWidth) { //document.documentElement.clientWidth 螢幕的可視寬度 left = document.documentElement.clientWidth - el.clientWidth - 5 }if (top <= 0) { top = 5; } else if (top > document.documentElement.clientHeight - el.clientHeight) { top = document.documentElement.clientHeight - el.clientHeight - 5 } el.style.left = left + 'px'; el.style.top = top + 'px'; } document.onmouseup = function () { document.onmousemove = document.onmouseup = null; } } }, //當VNode更新的時候會執行updated,可以觸發多次 updated: function(el) {} }); export default drag;
使用:全域性引入或者區域性引入
在需要拖拽的盒子上加v-drag標籤