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也是个钩子函数，在这个钩子函数里继续完成取消事件监听
    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，修改位置，希望能给大家带来经验，然后自己去注册一些更加实用、更加牛 * 的自定义指令！