如果我要拿vue3制作一个对话框页面，你能给我基础的代码吗

当然，为了创建一个基本的Vue3对话框（也称为弹窗或Modal）页面，你可以使用`vue-router-viewport`或`vue-drag-resize-dialog`这类第三方插件。下面是一个简单的例子，我们将使用`vue-drag-resize-dialog`作为示例：

首先，你需要安装这个插件：

npm install vue-drag-resize-dialog

然后，在你的项目里创建一个`Dialog.vue`文件，这是对话框组件：

<template>
  <vdr-dialog ref="dialog" :open.sync="showDialog">
    <div class="dialog-content">
      <h3>对话框标题</h3>
      <p>这里放你的内容...</p>
      <button @click="hideDialog">关闭</button>
    </div>
  </vdr-dialog>
</template>

<script>
import { VDRDialog } from 'vue-drag-resize-dialog'

export default {
  components: {
    VDRDialog,
  },
  data() {
    return {
      showDialog: false,
    }
  },
  methods: {
    hideDialog() {
      this.showDialog = false;
    },
  },
}
</script>

接下来，在需要显示对话框的地方，比如在App.vue或者其他组件里：

<template>
  <button @click="openDialog">打开对话框</button>
  <router-view />
</template>

<script>
import Dialog from '@/components/Dialog'
import { useRouter } from 'vue-router'

export default {
  //...
  methods: {
    openDialog() {
      this.$refs.dialog.open();
    },
    closeDialog() {
      this.$refs.dialog.close();
    },
  },
  components: {
    Dialog,
  },
  setup() {
    const router = useRouter()
    router.onRouteChangeComplete(() => {
      if (!router.isReady) {
        return
      }
      // 清理之前打开的对话框，避免影响其他页面
      this.closeDialog()
    })
  },
}
</script>

这个例子中，当你点击按钮时，会打开对话框，而每次路由切换完成后都会自动关闭当前打开的对话框。记得在实际项目中根据需求调整样式和交互细节。