vue 拖拽元素的移动 ——自定义指令

/// 私有指令
directives: {

drag: {
// 指令的定义
inserted: function (el) {
el.onmousedown = function (e) {
//获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
let divx = e.clientX - el.offsetLeft;
let divy = e.clientY - el.offsetTop;
//包含在onmousedown里，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
document.onmousemove = function (e) {
//获取移动后div的位置：鼠标位置-divx/divy
let l = e.clientX - divx;
let t = e.clientY - divy;
el.style.left = l + 'px';
el.style.top = t + 'px';
}
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
}
}

}
}
}
///全局指令

第一步：建立一个全局的命令文件例如：directive/directives.js.

第二步：利用Vue.directive()建立一个全局命令，并将它暴露出来，例如一个focus 让表单自动聚焦.

directives.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import Vue from 'vue'; Vue.directive('focus',{  //当绑定元素插入到DOM中  inserted: function(el){   el.focus(); //元素聚焦   el.setAttribute('placeholder','自定义内容');  } }) Vue.directive('***',{  inserted: function(el){   //....  } })   export {Vue}

第三步：在main.js（入口JS文件）中将它引入，可以省略文件后缀.

main.js

?

1	import directive from './components/global/directives';

这样任何一个Vue文件只要这样v-focus(命令名)，就可以很方便的用到了

?

1	<el-input v-model="input" placeholder="" v-focus>el-input

 //参考  https://www.jb51.net/article/121738.htm
//参考   https://www.cnblogs.com/happybread/p/8710904.html ;