Vue实现发送验证码防抖设计

　　概述：

　　　　1.通过Vue的data变量数据绑定发送验证码的button组件(包含disabled属性和text显示文本)

　　　　2.点击事件，发送验证码且修改disabled和text值，且通过setinterval计时器来循环处理当前剩余时间，结束时候重置disabled和text值

code：

 

<!DOCTYPE html>
<html lang="en">

    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="vue.js包路径"></script>
    </head>

    <body>
        <div id="demo">
            <button :disabled="disable" @click="send">{{text}}</button>
        </div>
    </body>
    <script>
        var vm=new Vue({
            el: "#demo",
            data() {
                return {
                    text: "发送验证码",
                    time: 5,
                    timer: null,
                    disable: false
                }
            },
            created() {
                // 本地拿到时间
                const time=localStorage.getItem('time');
                // 判断是否大于0
                if (time&&time>0) {
                    //  解决刷新页面按钮有空白情况
                    this.text=time+"s后重新发送";
                    this.time=time;
                    this.send();
                }
            },
            methods: {
                send() {
                    // 点击按钮，禁用按钮，防止多次点击
                    this.disable=true
                    this.text=this.time+"s后重新发送"
                    localStorage.setItem('time', this.time);
                    this.timer=setInterval(() => {
                        if (this.time>0) {
                            this.time--
                            localStorage.setItem('time', this.time)
                            this.text=this.time+"s后重新发送"
                        } else {
                            clearInterval(this.timer);
                            this.time=5
                            this.disable=false
                            this.text='重新发送'
                        }
                    }, 1000)
                }
            }
        })
    </script>

</html>
放入vue.js包可以直接使用的demo

 

学习于：here

【Over】

posted @ 2022-09-02 14:09  Renhr  阅读(191)  评论(0)    收藏  举报