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>
