网站的建设服务平台,资阳网站优化,建设宠物网站的目的,顺德网络营销网站vue2 自定义指令实现可移动模态框效果 此效果通过 vue 指令方式实现任意元素可拖拽移动。 参考官网指令介绍 https://v2.cn.vuejs.org/v2/guide/custom-directive.html 在 drag.js 文件中使用 Vue.directive() 注册一个全局自定义指令 v-drag import Vue from vue;
// 1.参数一… 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;在 main.js 中引入该指令 import ./utils/drag在需要实现拖拽的元素中加入指令v-drag
