Vue 实现滑动验证码

使用插件 vue-puzzle-vcode，安装方法如下

npm install vue-puzzle-vcode --save

使用方法如下，更多参数请查看 官网

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

自定义图片（也可以是网络图片完整URL路径，但注意图片跨域问题，因为canvas api无法调用跨域的图片）

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

效果如图所示：