Utilice el complemento vue-puzzle-vcode , el método de instalación es el siguiente
npm install vue-puzzle-vcode --save
Utilice el siguiente método, más parámetros, consulte el sitio web oficial
<template>
<div>
<Vcode :show="isShow" @success="success" @close="close"></Vcode>
<button @click="submit">登录</button>
</div>
</template>
<script>
import Vcode from "vue-puzzle-vcode";
export default {
components: {
Vcode
},
data() {
return {
isShow: false, // 验证码模态框是否出现
}
},
methods: {
submit(){
this.isShow = true;
},
// 用户通过了验证
success(msg){
this.isShow = false; // 通过验证后，需要手动隐藏模态框
},
// 用户点击遮罩层，应该关闭模态框
close(){
this.isShow = false;
}
}
}
</script>
<style scoped>
</style>
Imagen personalizada (también puede ser la ruta URL completa de la imagen de red, pero preste atención al problema de las imágenes entre dominios, porque la API de lienzo no puede llamar imágenes entre dominios)
<template>
<Vcode :imgs="[Img1, Img2]" />
</template>
<script>
import Img1 from '~/assets/img1.png';
import Img2 from '~/assets/img2.png';
export default {
data(){
return {
Img1,
Img2
}
}
}
</script>
El efecto se muestra en la figura:
