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

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

 

 

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