Vue里如何注册全局自定义指令？
根据Vue官网给出的注册自定义聚焦示例，编写以下自定义拖拽指令…
一、首先创建一个index.js文件，用于编写我们注册自定义指令的代码
export default (vue) => {
/* 1、自定义全局自动聚焦 这个是官网给出的
vue.directive('focus', {
inserted: function (el) {
el.focus()
}
}) */
/*2自定义全局拖拽指令 */
vue.directive('drag', {
inserted: function (el, binding, vnode) {
//inserted是一个钩子函数，表示被绑定的元素插入到 DOM
let modalBox = el
//获取视口宽度及高度(视口高度与宽度指的就是你能看得见的浏览器窗口的高度与宽度)
let watchWidth = modalBox.offsetParent.offsetWidth //前提要给body和html宽高设为100%
let watchHeight = modalBox.offsetParent.offsetHeight
//获取被绑定元素自身宽度及高度
let modalWidth = window.getComputedStyle(modalBox).width
modalWidth = parseInt(modalWidth.substring(0,modalWidth.length - 2))
let modalHeight = window.getComputedStyle(modalBox).height
modalHeight = parseInt(modalHeight.substring(0,modalHeight.length - 2))
//鼠标按下即开始监听
modalBox.onmousedown = e1 => {
modalBox.style.cursor = "pointer"; //这个是鼠标划过手型效果，不喜欢的可以不加
modalBox.style.zIndex = "999"; //拖动时优先级，很好理解
//算出鼠标相对元素的的位置
let width = e1.clientX - modalBox.offsetLeft
let height = e1.clientY - modalBox.offsetTop
document.onmousemove = e2 => {
//鼠标的位置减去鼠标相对元素的位置得到元素自身的位置
let modalLeft = e2.clientX - width
let modalTop = e2.clientY - height
//下面的4个if判断是用来限制拖动时盒子不要自动超出浏览器现有宽度与高度，
//不理解你就把4个if全删掉，再去拖拽，大范围的拖拽，看看会发生什么你就懂了
if(modalLeft < 0){
modalLeft = 0
}
if(modalTop < 0){
modalTop = 0
}
if(modalLeft + modalWidth >= watchWidth){
modalLeft = watchWidth - modalWidth
}
if(modalTop + modalHeight >= watchHeight){
modalTop = watchHeight - modalHeight
}
//开始移动
modalBox.style.position = 'absolute';
modalBox.style.left = modalLeft + 'px'
modalBox.style.top = modalTop + 'px'
}
}
//完成拖拽时记得把监听的事件移除
document.onmouseup = () =>{
document.onmousemove = null
modalBox.style.cursor = "";
}
},
//update也是个钩子函数，在这个钩子函数里继续完成取消事件监听
//这里提醒：不要把onmousedown事件也取消了，如果取消了就只能拖拽一次了！！仔细点哟！
update: (el, binding, vnode) => {
document.onmouseup = null
}
})
}
二、来到我们的main.js文件，把我们写好的自定义指令调用起来，即注册！
//注册自定义指令
import Vue from 'vue'
import Directive from './directive/index.js' //因为我把自定义指令封装成一个函数了，
//只要调用它，传入Vue就行啦！
Directive(Vue)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
三、以上两步即完成了自定义指令的注册，下面我们到任意一个组件使用它即可
<template>
<div id="app">
<div v-drag class="box1">{
{
data}}</div>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
data: '你好啊vue自定义指令'
}
}
}
</script>
<style>
.box1{
height: 300px;
width: 300px;
background-color: paleturquoise;
}
</style>
最后：这里我就不给大家看效果了，大家自己去看效果，只需要在需要拖拽的盒子上面加个 v-drag指令就行了，非常方便；本示例并不复杂，无非就是操作DOM，修改位置，希望能给大家带来经验，然后自己去注册一些更加实用、更加牛 * 的自定义指令！