How to implement timeout and close the pop-up window in vue

For pop-up windows in Vue projects, you need to consider that users may keep waiting without responding, which will make users feel uncomfortable. In order to avoid this situation, we can automatically close the pop-up window by setting a timeout.

The Element UI library is used in the Vue project to implement pop-up windows. Element UI provides the ElDialog component to create pop-up windows. We can use the beforeClose attribute of the ElDialog component to implement the function of closing the pop-up window over time.

In the Vue project, when the pop-up window is created, we can set a callback function through the beforeClose property of ElDialog. This callback function will be automatically executed before the pop-up window is closed. We can set a timer in the callback function and click the "Confirm" or "Cancel" button of the pop-up window within the specified time to automatically close the pop-up window.

The following is the specific implementation method:

1. In the component of the pop-up window, set the beforeClose attribute and specify a callback function:

<template>
  <el-dialog
    title="弹窗标题"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
  >
    <span>弹窗内容</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>     
      <el-button type="primary" @click="confirmDialog" >确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        dialogVisible: false,
        timer: null, // 定时器
        timeout: 5000, // 超时时间，单位毫秒
      }
    },
    methods: {
      handleClose (done) {
        clearTimeout(this.timer) // 清除定时器
        done() // 关闭弹窗
      },
      confirmDialog () {
        // 点击“确认”按钮时，手动关闭定时器，调用 done() 关闭弹窗
        clearTimeout(this.timer)
        this.$emit('confirm')
      },
      closeDialog () {
        this.$emit('close')
      }
    },
    mounted: function () {
      // 定义一个 5 秒后自动关闭弹窗的定时器
      this.timer = setTimeout(() => {
        this.$emit('close')
      }, this.timeout)
    },
  }
</script>

2. In the component of the pop-up window In the parent component, listen to the close and confirm events of the child component, and modify the visible property of the pop-up window to control the opening and closing of the pop-up window.

<template>
  <div>
    <el-button type="primary" @click="showDialog">打开弹窗</el-button>
    <my-dialog
      :visible="dialogVisible"
      @close="dialogVisible = false"
      @confirm="dialogVisible = false"
    ></my-dialog>
  </div>
</template>

<script>
  import MyDialog from './MyDialog.vue'
  export default {
    components: {
      MyDialog
    },
    data () {
      return {
        dialogVisible: false
      }
    },
    methods: {
      showDialog () {
        this.dialogVisible = true
      },
    },
  }
</script>

At this point, in the Vue project, adding some logic code to the pop-up window component can realize the timeout function of closing the pop-up window.

The above is the detailed content of How to implement timeout and close the pop-up window in vue. For more information, please follow other related articles on the PHP Chinese website!