Vue 实现滑动验证码-蒲公英云

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>