vue2 自定义指令实现可移动模态框效果

此效果通过 vue 指令方式实现任意元素可拖拽移动。
参考官网指令介绍 https://v2.cn.vuejs.org/v2/guide/custom-directive.html

在 drag.js 文件中使用 Vue.directive() 注册一个全局自定义指令 v-drag

import Vue from 'vue';
// 1.参数一：指令的名称，定义时指令前面不需要写v-
// 2.参数二：是一个对象，该对象中有相关的操作函数
// 3.在调用的时候必须加v-
const drag = Vue.directive('drag', {// 每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象// binding 是一个对象，包含 name（指令名，不包括 v- 前缀）、value（指令的绑定值）、arg（传给指令的参数）等参数// 只调用一次，指令第一次绑定到元素时调用bind: function (el) { },// 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)inserted: function (el, binding) {el.onmousedown = function (e) {var disx = e.pageX - el.offsetLeft;var disy = e.pageY - el.offsetTop;document.onmousemove = function (e) {el.style.left = e.pageX - disx + 'px';el.style.top = e.pageY - disy + 'px';}document.onmouseup = function () {document.onmousemove = document.onmouseup = null;}}},// 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前updated: function (el) { }
})
export default drag;