vue3 全局弹窗在页面怎么调用

在Vue 3中，可以通过在全局注册一个组件来实现全局弹窗的调用。

首先，在main.js或者类似的入口文件中，使用Vue的createApp方法创建一个Vue实例，并将全局组件注册到该实例中。

import { createApp } from 'vue'
import App from './App.vue'
import GlobalDialog from './components/GlobalDialog.vue'

const app = createApp(App)

// 将全局弹窗组件注册为全局组件
app.component('global-dialog', GlobalDialog)

app.mount('#app')

接下来，在需要使用全局弹窗的页面组件中，可以直接在模板中使用`<global-dialog>`标签调用全局弹窗组件。

<template>
  <div>
    <button @click="openDialog">打开弹窗</button>
    <global-dialog v-if="showDialog" @close="closeDialog" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    }
  },
  methods: {
    openDialog() {
      this.showDialog = true
    },
    closeDialog() {
      this.showDialog = false
    }
  }
}
</script>

在以上示例中，我们首先在页面组件的data选项中定义了一个布尔型的showDialog变量来控制弹窗的显示与隐藏。然后，在openDialog方法中，将showDialog变量设为true，使得弹窗组件显示出来。在closeDialog方法中，将showDialog变量设为false，让弹窗组件隐藏起来。

通过以上的步骤，我们成功实现了在页面中调用全局弹窗组件。每当点击“打开弹窗”按钮时，弹窗组件就会显示出来，点击关闭按钮或其他操作，弹窗组件又会隐藏起来。