vue iview 前端集成滑块验证码，通过拖动滑块完成校验支持PC端及移动端

最新推荐文章于 2024-05-10 18:00:20 发布

kingrome2009

最新推荐文章于 2024-05-10 18:00:20 发布

阅读量4.3k

点赞数 1

分类专栏： vuejs2.0

本文链接：https://blog.csdn.net/kingrome2017/article/details/79153357

版权

滑块验证码，用户通过拖动滑块完成校验，支持PC端及移动端，新增 Blazor 版本的滑块验证码

在线演示地址

在这里插入图片描述

Gitee码云 git地址

在vue项目中通过 export 导出对象

这是项目本地js文件导入的正确方式，不要在script标签引入那是错误的

<script>
/* eslint-disable */
import {
    sliderCaptcha } from "@/assets/capcha/disk/longbow.slidercaptcha.js";
import "@/assets/capcha/disk/slidercaptcha.css";
export default {
   
  data() {

export let SliderCaptcha = function (element, options) {
   
    this.$element = $(element);
    this.options = $.extend({
   }, SliderCaptcha.DEFAULTS, options);
    this.$element.css({
    'position': 'relative', 'width': this.options.width + 'px', 'margin': '0 auto' });
    this.init();
};
// eslint-disable-next-line
SliderCaptcha.VERSION = '1.0';
SliderCaptcha.Author = 'argo@163.com';
SliderCaptcha.DEFAULTS = {
   
    width: 280,     // canvas宽度
    height: 155,    // canvas高度
    PI: Math.PI,
    sliderL: 42,    // 滑块边长
    sliderR: 9,     // 滑块半径
    offset: 5,      // 容错偏差
    loadingText: '正在加载中...',
    failedText: '再试一次',
    barText: '向右滑动填充拼图',
    repeatIcon: 'ivu-icon ivu-icon-ios-refresh',
    maxLoadCount: 3,
    // eslint-disable-next-line
    localImages: function () {
   
        return '';
    },
    // eslint-disable-next-line
    verify: function (arr, url) {
   
        var ret = false;
        $.ajax({
   
            url: url,
            data: JSON.stringify(arr),
            async: false,
            cache: false,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (result) {
   
                ret = result;
            }
        });
        return ret;
    },
    remoteUrl: null
};
// eslint-disable-next-line
function Plugin(option) {
   
    return this.each(function () {
   
        var $this = $(this);
        var data = $this.data('lgb.SliderCaptcha');
        var options = typeof option === 'object' && option;

        if (data && !/reset/.test(option)) return;
        if (!data) $this.data('lgb.SliderCaptcha', data = new SliderCaptcha(this, options));
        if (typeof option === 'string') data[option]();
    });
}

$.fn.sliderCaptcha = Plugin;
$.fn.sliderCaptcha.Constructor = SliderCaptcha;

var _proto = SliderCaptcha.prototype;
_proto.init = function () {
   
    this.initDOM();
    this.initImg();
    this.bindEvents();
};

_proto.initDOM = function () {
   
    var createElement = function (tagName, className) {
   
        var elment = document.createElement(tagName);
        elment.className = className;
        return elment;
    };

    var createCanvas = function (width, height) {
   
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        return canvas;
    };
    var canvas = createCanvas(this.options.width - 2, this.options.height); // 画布
    var block = canvas.cloneNode(true); // 滑块
    var sliderContainer = createEleme