使用

安装

npm i chenms-routate-captcha

页面中使用

<template>
  <cms-routate-captcha
    :options="captchaOptions"
    :size="size"
    @close="close"
    @complete="captchaComplete"
    @success="captchaSuccess"
    @fail="captchaFail"
  />
</template>

<script setup>
import cmsRoutateCaptcha from 'chenms-routate-captcha/index.vue'

// 图形验证码相关的 start
const captchaOptions = ref({
  theme: '#07f',
  desc: '滑动将图片转正',
  successClose: 1500, // 验证成功后页面关闭时间
  timerProgressBar: true, // 验证成功后关闭时是否显示进度条
  timerProgressBarColor: 'rgba(0, 0, 0, 0.2)', // 验证成功后关闭时是否显示进度条的背景颜色设置
  successCode: 1, // 接口请求成功的成功码
  isShowCloseIcon: false, // 是否显示关闭按钮
  request: {
    // 获取验证码信息
    info: (callback) => {
      getJSON(
        'axios的baseURL' + '获取选择图片信息接口(你们后端提供)'
        null,
        function (res, xhr) {
          if (xhr.status != 200) {
            $message.warn('系统出错：' + res.statusCode + '，请关闭重试！')
            return false
          }
          // 第二个参数传递从header中获取的token, 如果嫌麻烦, 可以在res内返回token
          callback(res.code, res.data.token, res.data.str)
        }
      )
    },
    // 验证, angle用户旋转角度
    check: (angle, token, callback) => {
      // 将token设置好, 数据验证时传递给后端
      // 当然这里的数据请求只作为参考, 实际使用中以你的数据请求组件方式为准
      getJSON(
        'axios的baseURL' + '验证旋转图片接口(你们后端提供)',
        { angle: angle, token },
        function (res, xhr) {
          if (xhr.status != 200) {
            $message.warn('系统出错：' + res.statusCode + '，请关闭重试！')
            return false
          }
          callback(res.code)
        }
      )
    },
    // 交换图片
    img: (id) => {
      return 'axios的baseURL' + '获取图片(你们后端提供)' + '?id=' + id
    }
  }
})

const size = ref({
  // 动态旋转图片验证的布局宽度
  width: 250,
  // 里面图片的宽度
  img: 200,
  // 滑动条布局的宽度
  control: 220,
  // 图片上下的margin值
  imgMargin: 20
})

// ajax请求, 这里只做演示, 请使用自己项目中的
const getJSON = (url, data, callback) => {
  let params = ''
  if (data && typeof data == 'object') {
    params = Object.keys(data)
      .map(function (key) {
        return encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
      })
      .join('&')

    url = url + ((url.indexOf('?') == -1 ? '?' : '&') + params)
  }

  let xhr,
    formData = null
  xhr = new XMLHttpRequest()
  xhr.withCredentials = false

  xhr.open('GET', url)
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  xhr.onload = function () {
    if (xhr.status != 200) {
      return
    }

    try {
      let res = JSON.parse(xhr.responseText) || null
      if (!res) {
        return
      }
      callback(res, xhr)
    } catch (e) {
      return
    }
  }

  xhr.send(formData)
}

// 验证失败的回调
const captchaFail = () => {
  
}
// 验证成功的回调
const captchaSuccess = (data) => {
 
}

// 验证完成的回调
const captchaComplete = (status) => {
 
}
// 弹窗关闭的回调
const close = () => {
 
}
// 图形验证码相关的 end
</script>

详细使用文档

https://juejin.cn/post/7367997561511149604