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パスにすることもできますが、キャンバス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>

効果を図に示します。