在Vue 3中，我们可以使用useDialog自定义指令来高雅地实现对话框的功能。以下是一个简单的示例：
- 首先，我们需要创建一个名为
useDialog.js的文件，并在其中定义我们的自定义指令：
// useDialog.js import { ref } from 'vue'; export default function useDialog() { const isOpen = ref(false); const close = () => { isOpen.value = false; }; const open = () => { isOpen.value = true; }; return { isOpen, close, open, }; }
- 然后，在
main.js文件中，我们需要导入并注册这个自定义指令：
// main.js import { createApp } from 'vue'; import App from './App.vue'; import useDialog from './useDialog'; const app = createApp(App); app.directive('dialog', useDialog); app.mount('#app');
- 现在，我们可以在我们的组件中使用这个自定义指令了。例如，在一个名为
MyComponent.vue的组件中：
<!-- MyComponent.vue --> <template> <div> <button @click="openDialog">打开对话框</button> <div v-if="isOpen" class="dialog" @click.self="closeDialog"> <h2>这是一个对话框</h2> <p>这里是对话框的内容。</p> <button @click="closeDialog">关闭对话框</button> </div> </div> </template> <script> import { ref } from 'vue'; import { directive as dialog } from '../useDialog'; export default { setup() { const isOpen = ref(false); const openDialog = () => { isOpen.value = true; }; const closeDialog = () => { isOpen.value = false; }; return { isOpen, openDialog, closeDialog }; }, directives: { dialog }, }; </script>
在这个示例中，我们创建了一个名为useDialog的自定义指令，它包含了一个布尔值isOpen，用于表示对话框是否打开。我们还定义了两个方法close和open，分别用于关闭和打开对话框。最后，我们在组件中使用了这个自定义指令，并通过点击按钮来控制对话框的打开和关闭。
