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 @   Renhr  阅读(182)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
· 零经验选手，Compose 一天开发一款小游戏！
点击右上角即可分享
微信分享提示