首先安裝依賴

npm install vue-puzzle-vcode --save

使用

html：

<Vcode :show="isShow" @success="onSuccess"/>

js:

import Vcode from "vue-puzzle-vcode";
  export default {
    data(){
      return {
        isShow: false, // 驗證碼模態框是否出現
      }
    },
    components:{
      Vcode
    },
    methods:{// 使用者通過了驗證
 

      success(){
        this.isShow = false; // 通過驗證後，需要手動隱藏模態框
      },
    }
  }

引數

事件

自定義圖片

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