Vue implementa código de verificação deslizante

Use o plugin vue-puzzle-vcode , o método de instalação é o seguinte

npm install vue-puzzle-vcode --save

Use o seguinte método, mais parâmetros, consulte o site oficial

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

Imagem personalizada (também pode ser o caminho de URL completo da imagem de rede, mas preste atenção ao problema de imagens entre domínios, porque a API de tela não pode chamar imagens de vários domínios)

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

O efeito é mostrado na figura: