?如何自定义Vue指令

Vue提供了directive属性来实现自定义指令注册，directive 第一个参数是指令名（指令名在声明的时候不需要加 v-），第二个参数是一个对象，对象内部提供了以下个钩子函数 (可选)：

同样在钩子函数也被赋予了许多的参数，通过获取一些参数来指定要操作的对象或事件（除了 `el` 参数之外，其它参数都应该是只读的，尽量不要修改他们）。

自定义拖拽指令

前面已经定义过focus指令了（需要了解的可以参考文章Vue实战056：input框自动获取焦点），这里我们新定义个drag指令，实现DOM元素的拖拽功能。在main.js文件中添加如下定义，鼠标按下时记录鼠标位置以及元素位置并算出鼠标相对元素的位置，在拖拽时记下当前鼠标的位置从而计算出鼠标移动距离，最后将元素的当前位置赋值给属性el.style.left和el.style.top即可（如果是图片的话加入：e.preventDefault()）：

自定义拖拽指令使用

调用自定义指令很简单，只要在模板中任何需要拖拽的元素上添加新的 v-drag属性即可。当然拖拽需要配合position属性来使用，在允许拖拽的区域设置属性position：relative，被拖拽元素设置属性position：absolute才能生效。

总结：

Vue指令可以非常方便快捷地操作DOM元素，当开发人员在某些场景下需要对普通DOM元素进行频繁操作的时候就可以考虑自定义一个指令，通过全局注册该指令可以提高代码的复用性，提升开发效率。

以上内容是小编给大家分享的Vue实战066：自定义指令及使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考专栏：Vue实战系列，在此也非常感谢大家对小编的支持！