js 调用vue3.2组件显示dialog框

在Vue 3.2中，可以使用Teleport组件来实现模态对话框（dialog）的显示。具体步骤如下：

1. 在Vue组件中定义一个Teleport组件，用于渲染dialog的内容：

<template>
  <teleport to="body">
    <div class="dialog">
      <!-- dialog的内容 -->
      <h2>{{ title }}</h2>
      <p>{{ message }}</p>
      <button @click="$emit('close')">关闭</button>
    </div>
  </teleport>
</template>

<script>
export default {
  props: {
    title: String,
    message: String,
  },
};
</script>

<style scoped>
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 400px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}
</style>

2. 在父组件中引入dialog组件，并在需要显示dialog的地方添加一个按钮：

<template>
  <div>
    <button @click="showDialog = true">打开对话框</button>
    <my-dialog v-if="showDialog" @close="showDialog = false" title="提示" message="这是一个对话框"></my-dialog>
  </div>
</template>

<script>
import MyDialog from './MyDialog.vue';

export default {
  components: {
    MyDialog,
  },
  data() {
    return {
      showDialog: false,
    };
  },
};
</script>

在这个例子中，我们定义了一个名为MyDialog的组件，用于渲染dialog的内容。在父组件中引入MyDialog组件，并在需要显示dialog的地方添加一个按钮。当用户点击按钮时，showDialog属性会变为true，MyDialog组件就会渲染到页面上，显示dialog框。

注意，为了避免dialog的样式受到父组件的样式影响，我们在MyDialog组件中使用了scoped样式。

另外，为了让dialog框可以覆盖整个页面，我们使用了Teleport组件，并将它的to属性设置为"body"。这样，dialog框就会被渲染到文档流之外，可以覆盖整个页面。