分类目录归档:vue.js

vue的directive的两种实现方式

引入第三方js组件的正确姿势是采用vue.directive的方式,而其它方式如下,

//以下方式引入第三方组件,会出现两次绘制对,也即在调试过程中可能会出现一些奇怪的问题,不建议使用这种方法。
export default {
   mounted: function () {
      this.$nextTick(function () {
         // todo: editor = CodeMirror.fromTextArea(document.getElementById('editor');
      }
   }
}

第一种,直接在app.js中添加指令如下:

Vue.directive('drag', {  
    inserted:function(el){  
        el.onmousedown=function(e){  
            let l=e.clientX-el.offsetLeft;  
            let t=e.clientY-el.offsetTop;  
            document.onmousemove=function(e){  
                el.style.left=e.clientX-l+'px';  
                el.style.top=e.clientY-t+'px';  
            };  
            el.onmouseup=function(){  
                document.onmousemove=null;  
                el.onmouseup=null;  
            }  
        }  
    }  
})  
new Vue({  
  el:'#app'  
});  

第二种,直接在vue的组件中添加如下