在vue3中自定义实现MessageBox弹窗

在Vue 3中，可以通过创建一个自定义组件来实现一个类似MessageBox的弹窗功能。以下是一个简单的例子：

1. 创建一个名为MessageBox.vue的单文件组件：

<template>
  <div v-if="visible" class="message-box">
    <div class="message-box-content">
      <p>{{ message }}</p>
      <button @click="handleOk">确定</button>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    message: String
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    show() {
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
      this.$emit('ok');
    }
  }
};
</script>
 
<style scoped>
.message-box {
  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;
}
 
.message-box-content {
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

2. 在父组件中使用MessageBox组件：

<template>
  <button @click="openMessageBox">打开MessageBox</button>
  <MessageBox
    :message="message"
    @ok="handleOk"
  />
</template>
 
<script>
import MessageBox from './MessageBox.vue';
 
export default {
  components: {
    MessageBox
  },
  data() {
    return {
      message: '这是一个MessageBox弹窗',
      messageBoxVisible: false
    };
  },
  methods: {
    openMessageBox() {
      this.$refs.messageBox.show();
    },
    handleOk() {
      console.log('MessageBox 确定按钮被点击');
    }
  }
};
</script>

在这个例子中，MessageBox组件通过v-if根据visible数据属性来决定是否显示。它有一个show方法，当调用这个方法时，它会将visible设置为true，从而显示弹窗。handleOk方法会将visible设置为false，并通过$emit触发一个ok事件，这样父组件可以知道用户点击了确定按钮。