Vue 自定义指令（拖拽，右键菜单）

简单搬运下基本概念：

在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令

基本用法:

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

钩子函数：

• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• update:被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

---

搬运完毕。下面是我用到的对拖拽和右键菜单的指令封装。

拖拽

Vue.directive('drag',{
    inserted:  function(target){
        target.onmousedown = function(ev){
            var disX = ev.clientX - target.offsetLeft;
            var disY = ev.clientY - target.offsetTop;
            document.onmousemove = function(eve){
                target.style.left = eve.clientX - disX + 'px';
                target.style.top = eve.clientY - disY + 'px';
                //Data.configData.dragData[_index].x = (eve.clientX - disX)/showWidth*100;
                //Data.configData.dragData[_index].y = (eve.clientY - disY)/showHeight*100;
            }
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
            return false;
        }
    }
})

自定义右键菜单

Vue.directive('menu',{
    inserted: function(target){
        target.oncontextmenu = function(){
            //do something......
            //Data.configData.dragData[_index].menu = true;
            return false;
        }
    }
})

值得注意的是：尽管需要对纯 DOM 元素进行底层操作，但还是要尽量减少直接对DOM的操作,尽量用数据去驱动。