在Vue3中创建和使用自定义指令的实现方式

const app = Vue.createApp({});

// 定义自定义指令
app.directive('my-directive', {
  // 当被绑定的元素插入到 DOM 中时调用
  mounted(el, binding) {
    // 这里可以对 el 进行操作
    el.style.color = binding.value; // 例如，设置文本颜色
  }
});

// 创建 Vue 实例
app.mount('#app');

const app = Vue.createApp({
  data() {
    return {
      hoverColor: 'blue', // 鼠标悬停时的颜色
    };
  },
});

// 定义自定义指令
app.directive('hover-color', {
  // 当元素被挂载时
  mounted(el, binding) {
    const originalColor = el.style.color; // 保存原始颜色

    // 鼠标悬停事件
    el.addEventListener('mouseenter', () => {
      el.style.color = binding.value || 'red'; // 设置悬停颜色
    });

    // 鼠标离开事件
    el.addEventListener('mouseleave', () => {
      el.style.color = originalColor; // 恢复原始颜色
    });
  },
});

// 创建 Vue 实例
app.mount('#app');

<div id="app">
  <h1 v-hover-color="'green'">鼠标悬停我会变色！</h1>
  <p v-hover-color>默认悬停颜色是红色。</p>
</div>

app.directive('color', {
  mounted(el, binding) {
    el.style.color = binding.arg || 'black'; // 使用参数设置颜色
    if (binding.modifiers.bold) {
      el.style.fontWeight = 'bold'; // 如果有 bold 修饰符，设置为粗体
    }
  },
});

<p v-color:blue.bold>这段文字是蓝色且加粗的。</p>