vue3-puzzle-vcode 滑动验证

2024-09-05 约 500 字预计阅读 3 分钟 - 次阅读

安装

1
2


npm install vue3-puzzle-vcode --save
yarn add vue3-puzzle-vcode

注册为全局组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import '@/assets/css/style.css'
import '@/assets/iconfont/iconfont.css'
import 'element-plus/es/components/message/style/css'
import 'element-plus/es/components/message-box/style/css'
import 'element-plus/theme-chalk/el-message.css'
import 'element-plus/theme-chalk/el-message-box.css'
import Vcode from "vue3-puzzle-vcode";

createApp(App)
    .use(router)
    .component('Vcode', Vcode)
    .mount('#app')

引入组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<script>
import { ref, reactive } from 'vue';
import { landRelevant } from "@/api/api.js";
import { ElMessage } from "element-plus";
import { useRouter } from 'vue-router'
import Vcode from "vue3-puzzle-vcode";
export default {
  setup() {

    return {
      // 其他数据
      Vcode,
    };
  }
}
</script>

使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


<template>
  <Vcode :show="isShow" @success="onSuccess" @close="onClose" :imgs="[Img1, Img2]"/>
  <button @click="onShow">开始验证</button>
</template>
<script>
import { ref } from "vue";
import Vcode from "vue3-puzzle-vcode";
export default {
  setup() {
    const isShow = ref(false);// 验证码模态框是否出现
    const Img1 = ref('https://img0.baidu.com/it/u=3422287847,344441285&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1725642000&t=59fe0eb1400ff433acaf83993ea0ada4');
    const Img2 = ref('https://img2.baidu.com/it/u=1544882228,2394903552&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1725642000&t=8d7d4a0dc42e691db4c3dc25941a151c');
    
    const onShow = () => {
      isShow.value = true;
    };
    
    const onClose = () => {
      isShow.value = false;  
    };
    
    const onSuccess = () => {
      onClose(); // 验证成功，手动关闭模态框
    };
  }
}
</script>

使用网络图片

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<template>
  <Vcode :show="isShow" @success="onSuccess" @close="onClose" :imgs="images"/>
</template>
<script>
export default {
  setup() {
    const images = ref([
      'https://img0.baidu.com/it/u=3422287847,344441285&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1725642000& t=59fe0eb1400ff433acaf83993ea0ada4',
      'https://img2.baidu.com/it/u=1544882228,2394903552&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1725642000&  t=8d7d4a0dc42e691db4c3dc25941a151c',
    ])
  }
}
</script>

使用项目图片

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<template>
  <Vcode :show="isShow" @success="onSuccess" @close="onClose" :imgs="images"/>
</template>
<script>
import img1 from "../assets/images/puzzle01.jpg";
import img2 from "../assets/images/puzzle02.jpg";
import img3 from "../assets/images/puzzle03.jpg";
export default {
  setup() {
    const images = ref([
      img1,
      img2,
      img3,
    ])
  }
}
</script>

参数

字段	类型	默认值	说明
show	Boolean	false	是否显示验证码弹框
type	String	“modal”	“modal"模态框形式 / “inside"内嵌形式
canvasWidth	Number	310	主图区域的宽度，单位 px
canvasHeight	Number	160	主图区域的高度，单位 px
puzzleScale	Number	1	拼图块(小的拼图)的大小比例，0.2 ～ 2 ，数字越大，拼图越大
sliderSize	Number	50	左下角用户拖动的那个滑块的尺寸，单位 px
range	Number	10	判断成功的误差范围，单位 px, 滑动的距离和拼图的距离小于等于此值时，会判定重合
imgs	Array	null	自定义图片
successText	String	“验证通过！”	验证成功时的提示文字
failText	String	“验证失败，请重试”	验证失败时的提示文字
sliderText	String	“拖动滑块完成拼图”	下方滑动条里的文字
className	String	"”	给根元素一个class类用于自定义样式
zIndex	Number	999	设置根元素一个层级z-index

事件

事件名	返回值	说明
success	偏差值	验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值 px
fail	偏差值	验证失败时会触发，返回值同上
close	null	用户点击遮罩层的回调
reset	null	用户手动点击右上角刷新按钮时触发的回调

内嵌形式

入参 type="inside"，将启用内嵌模式，应该用一个元素包裹：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<template>
  <div class="box">
    <Vcode type="inside" :show="isShow" />
  </div>
</template>

<style>
  .box{
    position: relative;
    width: 320px;
    height: auto;
  }
</style>