本文主要是介绍Vue.directive注册(全局与局部)自定义指令使用详解与实战，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
指令定义函数提供了几个钩子函数（可选）：
- bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。
- inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
- update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。
- componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
- unbind: 只调用一次， 指令与元素解绑时调用。
// 注册一个全局自定义指令
Vue.directive('custom-directive', {bind(el, binding, vnode) {// bind钩子函数，在指令第一次绑定到元素时调用// 可以执行一次性的初始化操作console.log('Directive bound!');},inserted(el, binding, vnode) {// inserted钩子函数，在绑定元素插入父节点时调用console.log('Element inserted into parent node!');},update(el, binding, vnode, oldVnode) {// update钩子函数，在绑定元素所在的模板更新时调用// 可以通过比较更新前后的绑定值进行一些操作console.log('Directive updated!');},componentUpdated(el, binding, vnode, oldVnode) {// componentUpdated钩子函数，在绑定元素所在模板完成一次更新周期时调用console.log('Directive component updated!');},unbind(el, binding, vnode) {// unbind钩子函数，在指令与元素解绑时调用console.log('Directive unbound!');}
});Vue 允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。
Vue自定义指令有全局注册和局部注册两种方式。
注册全局指令的方式
// 注册一个全局自定义指令
Vue.directive('custom-directive', {bind(el, binding, vnode) {// 指令与元素绑定时调用el.style.color = binding.value;},update(el, binding, vnode) {// 指令所在元素更新时调用，可以处理新值和旧值的变化el.style.color = binding.value;}
});
<!-- 全局注册指令 -->
<p v-custom-directive="'red'">Global Directive Example</p>v-draggable实例
需求：实现一个拖拽指令，可在页面可视区域任意拖拽元素。
思路：
- 设置需要拖拽的元素为相对定位，其父元素为绝对定位。
- 鼠标按下
(onmousedown)时记录目标元素当前的left和top值。 - 鼠标移动
(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的left和top值 - 鼠标松开
(onmouseup)时完成一次拖拽
- inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
const draggable = {inserted: function (el) {el.style.cursor = 'move'el.onmousedown = function (e) {let disx = e.pageX - el.offsetLeftlet disy = e.pageY - el.offsetTopdocument.onmousemove = function (e) {let x = e.pageX - disxlet y = e.pageY - disylet maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)if (x < 0) {x = 0} else if (x > maxX) {x = maxX}if (y < 0) {y = 0} else if (y > maxY) {y = maxY}el.style.left = x + 'px'el.style.top = y + 'px'}document.onmouseup = function () {document.onmousemove = document.onmouseup = null}}},
}
export default draggable批量注册指令，新建 directives/index.js 文件
import draggable from './draggable'
import longpress from './longpress'
// 自定义指令
const directives = {draggable,longpress,
}export default {install(Vue) {Object.keys(directives).forEach((key) => {Vue.directive(key, directives[key])})},
}
import draggable from './draggable' 和 import longpress from './longpress'：这两行代码是在当前文件中导入了名为 draggable 和 longpress 的自定义指令。
const directives = { draggable, longpress }：这里创建了一个对象 directives，包含了两个属性 draggable 和 longpress，分别对应上面导入的两个自定义指令。
export default { ... }：这是一个 ES6 的模块导出语法，导出了一个对象。这个对象具有一个名为 install 的方法，这个方法用于注册 Vue.js 自定义指令。
Object.keys(directives).forEach((key) => { Vue.directive(key, directives[key]) })：在 install 方法中，使用 Object.keys(directives) 获取 directives 对象的所有键名（即 draggable 和 longpress），然后通过 forEach 循环遍历这些键名。在循环的每一步中，使用 Vue.directive(key, directives[key]) 将相应的自定义指令注册到 Vue.js 中，使得这些指令可以在 Vue 组件中使用。
在 main.js 引入并调用
import Vue from 'vue'
import Directives from './JS/directives'
Vue.use(Directives)使用: 在 Dom 上加上 v-draggable 即可
<template><div class="el-dialog" v-draggable></div>
</template>布局自定义指令：注册了布局自定义指令后，可以在 Vue 模板中使用该指令
<template><div><!-- 局部注册指令 --><p v-custom-directive="'blue'">Local Directive Example</p></div>
</template><script>
// 引入Vue.js并定义组件
import Vue from 'vue';export default {directives: {'custom-directive': {bind(el, binding, vnode) {// 指令与元素绑定时调用el.style.color = binding.value;},update(el, binding, vnode) {// 指令所在元素更新时调用，可以处理新值和旧值的变化el.style.color = binding.value;}}}
};
</script>
这篇关于Vue.directive注册(全局与局部)自定义指令使用详解与实战的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
