美文网首页
van-count-down 倒计时相关问题

van-count-down 倒计时相关问题

作者: 攻城狮_前端程序媛 | 来源:发表于2021-08-08 15:26 被阅读0次
    1. 倒计时重置问题
    • 背景:业务需要在开启倒计时、暂停、恢复倒计时实时判断是否展示倒计时,并重置倒计时

    • 问题:直接修改this.countDownTime = message.countNum, 倒计时重置并不会有什么用,依然是按照旧的倒计时时间进行--


      倒计时代码.png
    • 解决方法:
      -- 思路1: 按照官方文档 this.$refs.countDown.reset()

     在重置接收到长链接推送时,this.countDownTime = message.countNum,
      this.$refs.countDown.reset()
      但是会报this.$refs.countDow  undefined的错误
    

    -- 思路2: 考虑到vue虚拟DOM及模版渲染的问题,

    在this.$nextTick 回调函数中 this.$refs.countDown.reset()
    结果是依然报错
    

    -- 终极解决方案:

    在判断倒计时是否展示的方法中,在倒计时显示为真的判断中使用this.$nextTick回调函数this.$refs.countDown.reset()
    
    2. 修改倒计时样式
    • 背景: 修改了倒计时文字大小,在pc端看一切正常,但是在手机上就出现了如下图问题
    • 解决方法: 在修改font-size时,同步修改line-hieght
    修改了倒计时样式出现的问题.png

    相关文章

      网友评论

          本文标题:van-count-down 倒计时相关问题

          本文链接:https://www.haomeiwen.com/subject/eilovltx.html