Vue implements sliding verification code

Use the plugin vue-puzzle-vcode , the installation method is as follows

npm install vue-puzzle-vcode --save

Use the following method, more parameters, please see the official website

<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>

Custom picture (it can also be the full URL path of the network picture, but pay attention to the cross-domain problem of pictures, because the canvas api cannot call cross-domain pictures)

<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>

The effect is shown in the figure: