vue3自定义指令

BJYXSZD-91852024-01-18 18:57

在 Vue 3 中，我们可以通过使用 app.directive 方法来定义自定义指令。下面是一个简单的例子：

html 复制代码

<template>
  <div v-highlight>Hello Vue 3!</div>
</template>

<script>
import { createApp } from 'vue';

const app = createApp({});

app.directive('highlight', {
  mounted(el) {
    el.style.backgroundColor = 'yellow';
  },
  unmounted(el) {
    el.style.backgroundColor = '';
  },
});

app.mount('#app');
</script>

在上面的例子中，我们定义了一个名为 highlight 的自定义指令，它在元素被挂载时将其背景颜色设置为黄色，并在元素被卸载时将背景颜色重置为空。

在 mounted 和 unmounted 方法中，我们可以通过参数 el 来访问指令所绑定的元素。通过修改元素的样式来实现指令的功能。

注意：指令只能在组件的模板中使用，而不能在组件的选项中使用。