<template>
<div class="itembody">
<div class="centers">
<div class="box">
<i class="el-icon-check"></i>
</div>
<p>提交成功，感谢您的建议</p>
<p style="margin-top: 10px;width: 225px">将于 <i style="color: #1b7cff">{{time}}s </i>后跳转到首页
<el-button type="text" style="font-size: 16px" @click="tiaozhuan">立即跳转</el-button>
</p>
</div>
</div>
</template>
<script>
export default {
data(){
return{
time:3 //几秒后跳转设置几秒
}
},
mounted() {
//设置定时器（每隔1s执行一次）
let time = setInterval(()=>{
this.go()
},1000)
//设置定时器（3s后清除 setInterval 这个定时器 并且执行跳转页面）
setTimeout(()=>{
clearInterval(time) //清除定时器
this.tiaozhuan() // 跳转页面
},3000)
},
methods:{
go(){
if (this.time <= 0){
this.time = 0
}else {
this.time = this.time - 1
}
},
tiaozhuan(){
this.$router.push("/")
},
}
};
</script>
<style scoped>
i{
font-style: normal;
}
.itembody {
position: relative;
height: 100%;
}
.itembody .centers {
position: absolute;
top: 36%;
left: 52%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
}
.centers p{
margin-top: 20px;
color: #c2c2c2;
}
.box {
width: 120px;
height: 120px;
background: #1b7cff;
border-radius: 50%;
position: relative;
}
.box i {
position: absolute;
font-size: 60px;
font-weight: 700;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
封装操作成功反馈页面（几秒后跳转页面）
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 书接前文。 来到/store/modules.login.js,找到弹框的地方 在这里，登录信息应该就在那个inf...
- 概述： 小伙伴说遇到了一个问题，有个客户ACG本地Web认证成功之后无法跳转到设置的成功跳转页面，看了实验室成功的...
- 自定义封装链接跳转 link 链接 type 链接类型 空 未指定 uniapp 原生链接 h5 即h5链接 n...
