element-ui实现一个延时退出确认框

element-ui实现：
点击一个按钮弹出一个确认框，设置一个倒计时，当时间为0秒时在没有点击任何按钮的情况下，自动触发确认按钮事件。

<template>
  <div>
    <el-button type="text" @click="openDialog">点击打开 Dialog</el-button>
    <el-dialog
      :title="targetIp"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <span>{{ propMsg }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refuseToCast">取 消</el-button>
        <el-button type="primary" @click="allowToCast">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      seconds: 5,
      targetIp: '192.168.9.124'
    };
  },
  computed: {
    propMsg: function() {
      return "当前设备请求发起投屏 " + this.seconds + " 秒";
    },
  },
  methods: {
    refuseToCast() {
      console.log("当前投屏被拒绝");
      this.centerDialogVisible = false;
    },
    allowToCast() {
      console.log("当前设备发起投屏");
      this.centerDialogVisible = false;
    },
    openDialog() {
      this.centerDialogVisible = true;
      var interval = setInterval(() => {
        this.seconds--;
        if (this.seconds <= 0) {
          this.centerDialogVisible = false;
          clearInterval(interval);
        }
      }, 1000);
      this.seconds = 5;
    },
  },
};
</script>

<style scoped>
span {
    text-align: center;
    display:block;
}
</style>