Vue 实现滑动验证码

绝地灬酷狼 2023-01-11 08:48 126阅读 0赞

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

npm install vue-puzzle-vcode --save

使用方法如下，更多参数请查看 [官网][vue-puzzle-vcode]

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

效果如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center]

[vue-puzzle-vcode]: https://gitee.com/beeworkshop/vue-puzzle-vcode?_from=gitee_search
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/47b7bb3b88554a15a054ac4da43ecd9d.png