vue怎么实现超时关闭弹窗-前端问答-PHP中文网

vue怎么实现超时关闭弹窗

PHPz

发布： 2023-04-12 09:16:19

原创

1681人浏览过

针对vue项目中的弹窗，需要考虑到用户可能在没有响应的情况下会一直等待，这会使用户感到不舒服。为了避免这种情况的发生，我们可以通过设置超时时间来自动关闭弹窗。

Vue项目中使用Element UI库来实现弹窗，Element UI提供了ElDialog组件来创建弹窗。我们可以使用ElDialog组件的beforeClose属性来实现超时关闭弹窗的功能。

在Vue项目中，在弹窗创建时，我们可以通过ElDialog的beforeClose属性来设定一个回调函数，在弹窗关闭之前会自动执行这个回调函数。我们可以在回调函数中，设定一个定时器，并在规定的时间内点击弹窗的“确认”或“取消”按钮，以此来实现自动关闭弹窗。

下面是具体的实现方法：

1、在弹窗的组件中，设置 beforeClose 属性，指定一个回调函数：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

立即学习“前端免费学习笔记（深入）”；

<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、在弹窗的父组件中，监听子组件的 close 和 confirm 事件，并修改弹窗的 visible 属性来控制弹窗的打开和关闭。

<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>

登录后复制

至此，在Vue项目中，在弹窗组件中添加一些逻辑代码即可实现超时关闭弹窗功能。

以上就是vue怎么实现超时关闭弹窗的详细内容，更多请关注php中文网其它相关文章！