如何在vue3 compositionAPI上定义指令？

Question

如何用证监会vue3格式的新语法糖定义和使用vue3组合api的指令？对于options API，它曾经是这样的

import click_outside from "@/directives/click-outside.js";
export default {
  directives: {
    "click-outside": click_outside,
  }, 
  ...
}

click-outside.js

<script setup>
import {defineProps, onBeforeMount, onUnmounted, directive } from "vue";

const onBeforeMount = (el, binding) => {
  ...
};
const onUnmounted = (el) => {
 ...
};
</script>

我无法在组合API中找到相同的对应代码。

Answer 1

@Estus的答案已经足够了，但是为了澄清，您只需导入指令，就像使用PascalCase或camelCase导入组件一样，并且可以在模板中直接使用它。

<script setup>
import vClickOutside from "@/directives/click-outside.js";
const outside = () =>{ ... }
...
</script>
<template>
...
<div v-click-outside="outside">
...
...
</template>