vue-directive自定義指令實現拖拽
阿新 • • 發佈：2020-07-24
vue擁用很多強大的指令，但有些邏輯無法實現，所以vue提供了directive自定義指令由開發者任意擴充套件，本文自定義一個拖拽功能的指令
一、效果圖如下
指令的使用:自定義拖拽的初始位置(left,top),不傳參預設為0，即在左上角
二、思路詳解
1、首先需要清楚指令裡面有哪些引數，第一個引數el是繫結元素
2、第二個引數一個物件(包含指令name,value，argument等)，繫結指令那裡傳參，這裡接收引數並寫邏輯
三、附上具體實現程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 120px; height: 120px; background-color: #eee; } </style> </head> <body> </body> <div id="app"> <button v-drag>點選</button> <div class="box" v-drag:[place]></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.directive('drag', { inserted: function (el, bancing) { console.log(bancing)** if (bancing.arg) { **l = bancing.arg.left; t = bancing.arg.top; } else {** l = t = 0;** }** el.style.position = 'absolute'; **el.style.left = l + 'px'; el.style.top = t + 'px'; el.onmousedown = function (e) { var x = e.offsetX; var y = e.offsetY; document.onmousemove = function (eve) { var left = eve.clientX - x; var top = eve.clientY - y; el.style.left = left + 'px'; **el.style.top = top + 'px';** } document.onmouseup = function (eve) {** document.onmousemove = null;** document.onmouseup = null;** } } } }) new Vue({ el: '#app', data: { place: { left: 100, top: 100 } } }) </script> </html>