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

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 倒计时相关问题)