Vue中验证码计时器的制作

关键技术：
setInterval
clearInterval
ヽ(●-`Д´-)ノ
由于setInterval不能传递参数，导致不能直接通过参数来完成计时器。
我才用的方式为改变DOM，通过监听DOM状态来做判断。
具体方案代码如下：
HTML结构：

 <button class="yzm-btn2" @click="sendCode()"><span id="sendMsg3">{{findFont.sendMsg2}}</span><span                                id="sendMsg4"></span></button>

code2: function () {                if ($("#sendMsg2").css("display") == "none") {                    $(".yzm-btn").css("background-color", "#3b4557")                    let t = 120                    var timer = setInterval(function () {                        t--                        if (t > 0) {                            let ttext = '已发送（' + t + '秒）'                            $("#sendMsg2").css("display", "block")                            $("#sendMsg2").html(ttext)                            $("#sendMsg1").css("display", "none")                        } else {                            $(".yzm-btn").css("background-color", "#268e65")                            $("#sendMsg1").css("display", "block")                            $("#sendMsg2").css("display", "none")                            clearInterval(timer)                        }                    }, 1000);//                } else {                }            }

整体思路：
首先发送按钮文本为｛｛点击发送｝｝，
后面隐藏一个空的span标签：display：none
点击按钮，
检测发送文本与后面标签状态。
如果发送文本存在，则隐藏发送文本，开始进入setInterval，把隐藏的span标签显示出来
在里面对计数器累加判断，如果计数器时间归0，则恢复发送文本，并继续隐藏另一个span标签。
并清除setInterval
当发送文本为隐藏时，单击按钮不执行任何事件。

技术需要交流，大清亡与闭关锁国。 欢迎转载。form 三思 QQ599901155