vue3使用useDialog实现对话框的示例代码

// 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
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 -->
<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>