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