vue封装图片滑块验证+读秒组件

最新推荐文章于 2024-10-08 11:19:00 发布

小迷糊MJ

最新推荐文章于 2024-10-08 11:19:00 发布

阅读量813

点赞数

分类专栏：学习笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Mjxiaomihu/article/details/126623637

版权

本文介绍了如何在Vue项目中封装一个图片滑块验证组件，并实现读秒功能。组件包括HTML、CSS和JS三部分，其中JS部分的yidun.js需要在公共文件夹引入。组件提供了初始化验证、发送验证码后的处理以及控制是否可发送验证码的disabled属性。成功发送验证码后，通过onSendSuccess方法进行读秒逻辑，包括保存发送时间、计算剩余时间并处理页面刷新时的续读秒情况。

摘要由CSDN通过智能技术生成

我们在项目开发过程中经常会遇到用户发送验证码后唤起图片滑块验证，验证成功后触发发送验证码事件（不处理发送验证码逻辑父组件去监听）进而读秒等流程，特此封装了该组件。

1、html部分

<template>
    <div>
        <div v-if="countDownNum < 1" @click="_sendCode" slot="suffix" class="modifyColor"
             :class=" _disabled ? 'disabled' : 'hover7'">
            发送验证码
        </div>
        <div v-else class="mt6 modifyColor">
            {
  { countDownNum }}S
        </div>
        <div :id="cacheKey"></div>
    </div>
</template>

2、css部分

.modifyColor {
    color: #4C70DF;
    padding-right:15px;
}

.mt6{
    margin-top: 6px;
}

3、js部分

（1）将以下内容放在public文件夹中取名为yidun.js

(function (global, factory) {
    'use strict'
    if (typeof module === 'object' && typeof module.exports === 'object') {
        module.exports = global.document ? factory(global) : function (w) {
            if (!w.document) {
                throw new Error('initNECaptchaWithFallback requires a window with a document')
            }
            return factory(w)
        }
    } else if (typeof define === 'function' && define.amd) {
        define('initNECaptchaWithFallback', [], function () {
            return factory(global)
        })
    } else {
        global.initNECaptchaWithFallback = factory(global)
    }
}(typeof window !== 'undefined' ? window : this, function (window) {
    'use strict'
    var errorCallbackCount = 0
    // 常量
    var DEFAULT_VALIDATE = 'QjGAuvoHrcpuxlbw7cp4WnIbbjzG4rtSlpc7EDovNHQS._ujzPZpeCInSxIT4WunuDDh8dRZYF2GbBGWyHlC6q5uEi9x-TXT9j7J705vSsBXyTar7aqFYyUltKYJ7f4Y2TXm_1Mn6HFkb4M7URQ_rWtpxQ5D6hCgNJYC0HpRE7.2sttqYKLoi7yP1KHzK-PptdHHkVwb77cwS2EJW7Mj_PsOtnPBubTmTZLpnRECJR99dWTVC11xYG0sx8dJNLUxUFxEyzTfX4nSmQz_T5sXATRKHtVAz7nmV0De5unmflfAlUwMGKlCT1khBtewlgN5nHvyxeD8Z1_fPVzi9oznl-sbegj6lKfCWezmLcwft8.4yaVh6SlzXJq-FnSK.euq9OBd5jYc82ge2_hEca1fGU--SkPRzgwkzew4O4qjdS2utdPwFONnhKAIMJRPUmCV4lPHG1OeRDvyNV8sCnuFMw7leasxIhPoycl4pm5bNy70Z1laozEGJgItVNr3' // 默认validate
    var FALLBACK_LANG = {
        'zh-CN': '前方拥堵，已自动跳过验证',
        'en': 'captcha error，Verified automatically'
    }
    var CACHE_MIN = 1000 * 60 // 缓存时长单位，1分钟
    var REQUEST_SCRIPT_ERROR = 502
    var RESOURCE_CACHE = {}
    // 工具函数
    function loadScript(src, cb) {
        var head = document.head || document.getElementsByTagName('head')[0]
        var script = document.createElement('script')

        cb = cb || function () {}

        script.type = 'text/javascript'
        script.charset = 'utf8'
        script.async = true
        script.src = src

        if (!('onload' in script)) {
            script.onreadystatechange = function () {
                if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
                this.onreadystatechange = null
                cb(null, script) // there is no way to catch loading errors in IE8
            }
        }

        script.onload = function () {
            this.onerror = this.onload = null
            cb(null, script)
        }
        script.onerror = function () {
            // because even IE9 works not like others
            this.on