引入第三方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的组件中添加如下