1. 倒计时重置问题
背景:业务需要在开启倒计时、暂停、恢复倒计时实时判断是否展示倒计时,并重置倒计时
-
问题:直接修改this.countDownTime = message.countNum, 倒计时重置并不会有什么用,依然是按照旧的倒计时时间进行--
解决方法:
-- 思路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