2021/12/20 显示动态读秒跳转页面

显示动态读秒跳转页面

1、antdesign
第一种：
读秒3s后跳转

<template>
  <a-button type="primary" @click="openMessage">
    Open the message box
  </a-button>
</template>
<script>
const key = 'updatable';
export default {
  methods: {
    openMessage() {
      this.$message.success({ content: '购买成功，页面将在3秒后跳转...', key: 'key' })
            setTimeout(() => {
              // this.timer = 2
              this.$message.success({ content: '购买成功，页面将在2秒后跳转...', key: 'key' })
              setTimeout(() => {
                // this.timer = 1
                this.$message.success({ content: '购买成功，页面将在1秒后跳转...', key: 'key' })
                setTimeout(() => {
                  // this.timer = 0
                  this.$router.push('/account/order')
                }, 1000)
              }, 1000)
            }, 1000)
    },
  },
};
</script>

第二种：

<template>
 <div class="content">
    <div v-show="show" class="tip">
      <a-alert :message="timer" type="success" show-icon/>
      购买成功，页面将在<span id="mes">{{ timer }}</span>秒后跳转...
    </div>
    </template>

     data () {
    return {
      timer: 3
    }
  },
  
  methods：{
           var i = 3
           function getTime () {
              document.getElementById('mes').innerHTML = "<font color='red'>" + i + '</font>'
              this.timer = i
              i -= 1
              var x = setTimeout(() => {
            getTime()
            }, 1000)
            if (i <= 0) {
               clearTimeout(x)
              }
           };
           getTime()
           }