【关于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) {
   
  // 临时将指令添加到当前应用实例的指令注册表中
  // 注意：这会在当前组件及其子组件中全局注册该指令，直到应用实例被销毁
  inst