【关于Vue2/Vue3局部指令实现方式 + 使用局部指令形式实现element UI 2x版本Dialog拖拽】

本文主要展示vue2和vue3局部指令实现方式，element UI 2x的dialog实现拖拽逻辑放在最后，bind 钩子函数接收三个参数说明也放在最后，需要自取，自阅。

一、Vue2实现局部指令

<template>
  <div v-my-directive="'blue'">This text should be blue</div>
</template>
 
<script>
export default {
  directives: {
    'my-directive': {
      bind(el, binding, vnode) {
        // 指令逻辑
        el.style.color = binding.value;
      }
    }
  }
};
</script>

二、Vue3实现局部指令

<template>
  <div v-my-directive-local>This text should be red</div>
</template>
 
<script setup>
import { provide, getCurrentInstance } from 'vue';
 
// 假设我们在组件外部定义了 myDirective
const myDirective = {
  bind(el, binding, vnode) {
    el.style.color = 'red';
  }
};
 
// 获取当前组件实例
const instance = getCurrentInstance();
 
// 注意：这不是官方推荐的做法，因为指令通常不是通过 provide/inject 传递的
// 这里只是为了演示如何在组件内部“模拟”局部注册指令的效果
if (instance && instance.appContext) {
  // 临时将指令添加到当前应用实例的指令注册表中
  // 注意：这会在当前组件及其子组件中全局注册该指令，直到应用实例被销毁
  instance.appContext.config.globalDirectives.myDirectiveLocal = myDirective;
 
  // 为了在组件卸载时清理，我们可以使用 onUnmounted 钩子
  import { onUnmounted } from 'vue';
  onUnmounted(() => {
    // 从全局指令注册表中移除该指令
    delete instance.appContext.config.globalDirectives.myDirectiveLocal;
  });
}
</script>

三、element UI 2x的dialog实现拖拽逻辑

创建一个js文件copy下面代码，需要的地方import即可。
也可以直接copy下列bind部分代码覆盖自己的指令逻辑部分。

export default {
    bind(el, binding, vnode) {
      const dialogHeaderEl = el.querySelector('.el-dialog__header')
      const dragDom = el.querySelector('.el-dialog')
      dialogHeaderEl.style.cssText += ';cursor:move;'
      dragDom.style.cssText += ';top:0px;'
  
      // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
      const getStyle = (function() {
        if (window.document.currentStyle) {
          return (dom, attr) => dom.currentStyle[attr]
        } else {
          return (dom, attr) => getComputedStyle(dom, false)[attr]
        }
      })()
  
      dialogHeaderEl.onmousedown = (e) => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - dialogHeaderEl.offsetLeft
        const disY = e.clientY - dialogHeaderEl.offsetTop
  
        const dragDomWidth = dragDom.offsetWidth
        const dragDomHeight = dragDom.offsetHeight
  
        const screenWidth = document.body.clientWidth
        const screenHeight = document.body.clientHeight
  
        const minDragDomLeft = dragDom.offsetLeft
        const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
  
        const minDragDomTop = dragDom.offsetTop
        const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
  
        // 获取到的值带px 正则匹配替换
        let styL = getStyle(dragDom, 'left')
        let styT = getStyle(dragDom, 'top')
  
        if (styL.includes('%')) {
          styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
          styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
        } else {
          styL = +styL.replace(/\px/g, '')
          styT = +styT.replace(/\px/g, '')
        }
  
        document.onmousemove = function(e) {
          // 通过事件委托，计算移动的距离
          let left = e.clientX - disX
          let top = e.clientY - disY
  
          // 边界处理（暂不需要）
          // if (-(left) > minDragDomLeft) {
          //   left = -minDragDomLeft
          // } else if (left > maxDragDomLeft) {
          //   left = maxDragDomLeft
          // }
  
          if (-(top) > minDragDomTop) {
            top = -minDragDomTop
          } 
          // else if (top > maxDragDomTop) {
          //   top = maxDragDomTop
          // }
  
          // 移动当前元素
          dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
  
          // emit onDrag event
          vnode.child.$emit('dragDialog')
        }
  
        document.onmouseup = function(e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
  }
  

四、指令钩子函数接收三个参数说明

三个参数：el、binding 和 vnode。下面是这三个参数的详细解析：

1.el（元素）：
类型：HTMLElement
描述：这是指令所绑定的 DOM 元素。你可以直接操作这个元素来应用你的指令逻辑。例如，改变元素的样式、属性或监听事件。

2.binding（绑定值）：
类型：Object
描述：这是一个包含以下属性的对象：
name：指令的名称（不包括 v- 前缀）。例如，对于 v-my-directive，binding.name 的值将是 “myDirective”（注意 Vue 自动将指令名转换为驼峰式）。
value：传递给指令的值。在模板中，你可以通过如下方式传递值：v-my-directive=“someValue”，其中 someValue 可以是字符串、数字、布尔值或对象/数组等。在 binding.value 中你将获取到这个值。
expression：指令表达式的字符串形式。例如，如果你使用了 v-my-directive=“‘blue’”，那么 binding.expression 的值将是 “‘blue’”。
arg：指令的参数（如果有的话）。指令参数是在指令名称后面的可选部分，用方括号括起来。例如，在 v-my-directive:[argument]=“value” 中，argument 是指令的参数。
modifiers：一个包含修饰符的对象。修饰符是在指令后面用点表示的，用于改变指令的行为。例如，在 v-my-directive.mod1.mod2=“value” 中，binding.modifiers 将是一个包含 mod1: true 和 mod2: true 的对象。

3.vnode（虚拟节点）：
类型：VNode
描述：这是 Vue 的虚拟 DOM 节点表示。它包含了关于这个节点的信息，如标签名、子节点、属性等。在大多数情况下，你可能不需要直接操作这个对象，除非你正在做一些非常底层的 DOM 操作或优化。

五、全局指令注册方式（扫盲）

// main.js
import Vue from 'vue';
import App from './App.vue';
 
// 全局注册自定义指令
Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // 指令逻辑
    el.style.color = binding.value;
  }
});
 
new Vue({
  render: h => h(App),
}).$mount('#app');

感谢阅读，希望对你有帮助