Vue 进阶(幺陆肆):自定义指令之拖拽指令
一、前言
在博文《Vue进阶(九十一):自定义指令》中讲解了Vue
自定义指令(局部、全局)的创建方法,及指令相关的钩子函数。此篇博文在此基础上实现vue
自定义拖动指令。
二、定义全局拖拽指令
定义全局指令,需要在main.js
中写入vue.directive('drag',{});
即可。但是一般会先在项目中新建一个drag.js
文件,在js
文件内部实现拖拽逻辑,最后在dom
代码中调用该指令。
2.1 新建 drag.js 文件
复制代码
2.2 在 main.js 中引入该文件即可,不需要 vue.use();
复制代码
2.3 在页面中直接调用
复制代码
三、定义局部拖拽指令
局部指令,只需要在对应的.vue
页面中,添加directives
属性,并在directives
中写入对应的指令即可。
四、拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/a033ebd8748b24231e73bb2d3】。文章转载请联系作者。
评论