Vue自动关闭弹窗实现方法

在Vue应用程序中，经常会遇到需要在一定时间后自动关闭弹窗的需求。本文将介绍如何使用Vue实现自动关闭弹窗的功能，并提供相应的源代码示例。

首先，我们需要一个基本的Vue组件来显示弹窗。假设我们的弹窗组件名为"Popup"，包含一个"message"属性用于显示弹窗的内容。

<template>
  <div class="popup">
    <p>{
  
  { message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.popup {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

接下来，我们需要在父组件中使用"Popup"组件，并实现自动关闭的逻辑。我们可以使用Vue的计时器函数setTimeout来延迟一定时间后执行关闭弹窗的操作。

<template>
  <div>
    <button @click="showPopup">显示弹窗</but