vue+AJ-Captcha实现文字点选验证

先上效果图

以下代码参考的是

AJ-Captcha官网：功能概述 | AJ-Captcha

AJ-Captcha: 行为验证码(滑动拼图、点选文字)，前后端(java)交互，包含vue/h5/Android/IOS/flutter/uni-app/react/php/go/微信小程序的源码和实现 - Gitee.com

 第一步 安装依赖用于加密：

npm install crypto-js   -S

第二步 引入需要的js文件 

1.ase.js

import CryptoJS from 'crypto-js'
/**
 * @word 要加密的内容
 * @keyWord String  服务器随机返回的关键字
 *  */
export function aesEncrypt(word, keyWord = 'XwKsGlMcdPMEhR1B') {
  var key = CryptoJS.enc.Utf8.parse(keyWord)
  var srcs = CryptoJS.enc.Utf8.parse(word)
  var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
  return encrypted.toString()
}

2.Verify.js

export function resetSize(vm) {
    var img_width, img_height, bar_width, bar_height	// 图片的宽度、高度，移动条的宽度、高度
  
    var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth
    var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight
  
    if (vm.imgSize.width.indexOf('%') != -1) {
      img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px'
    } else {
      img_width = this.imgSize.width
    }
  
    if (vm.imgSize.height.indexOf('%') != -1) {
      img_height = parseInt(this.imgSize.height) / 100 * parentHeight + 'px'
    } else {
      img_height = this.imgSize.height
    }
  
    if (vm.barSize.width.indexOf('%') != -1) {
      bar_width = parseInt(this.barSize.width) / 100 * parentWidth + 'px'
    } else {
      bar_width = this.barSize.width
    }
  
    if (vm.barSize.height.indexOf('%') != -1) {
      bar_height = parseInt(this.barSize.height) / 100 * parentHeight + 'px'
    } else {
      bar_height = this.barSize.height
    }
  
    return { imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height }
  }
  
  export const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
  export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
  export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']

第三步 创建文字点选的组件

我的布局是这样的 仅供参考哈

 下面依次展示文件代码，css的样式我是直接在官网上粘贴过来的，里面可能包含一些滑块的样式我没有删除，有需要的也可以自行找出删除哈

1.Index.vue

****注: mode为"pop"时,使用组件需要给组件添加ref值,并且手动调用show方法 例: this.$refs.verify.show()**** 
****注: mode为"fixed"时,无需添加ref值,无需调用show()方法****

2.Verify.vue

3.VerifyPoints.vue

第四步 在其他页面引入文字点选组件