前端vue3打开弹层dialog怎么写

在 Vue3 中，打开弹层 dialog 可以使用组件来实现。以下是一个简单的实现示例：

父组件代码：

<template>
  <div>
    <button @click="openDialog">打开弹层</button>
    <dialog :visible="dialogVisible" @close="closeDialog">
      <h3>这是一个弹层</h3>
      <p>这里可以放置弹层的内容</p>
    </dialog>
  </div>
</template>

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

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

子组件 Dialog 代码：

<template>
  <div class="dialog" v-if="visible">
    <div class="dialog-content">
      <slot></slot>
      <button @click="$emit('close')">关闭弹层</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style>
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
</style>

当点击打开弹层按钮时，会将 dialogVisible 属性设置为 true，使子组件 Dialog 显示出来。Dialog 组件会根据 visible 属性来判断是否显示，当 visible 属性为 true 时显示，为 false 时隐藏。

当点击关闭弹层按钮时，会触发子组件 Dialog 的 close 事件，并将 dialogVisible 属性设置为 false，使 Dialog 组件隐藏起来。