先看代碼，復制使用即可，這是一個uniaap和vue版本的行為驗證，不同的區別是他們將使用不同的包，包檔案我已放在本人檔案下載資源中，您將看到以下效果（請看完gif圖，中間有過度時間有些長），感謝captcha 團隊的開源支持 附送連接，您對滑塊驗證有后端，html端，weex，reactnative，android，ios等多端的需求請訪問 https://mirror.anji-plus.com/captcha-web/#/
第一步 下載本人提供的壓縮包 解壓之后放進專案任意位置，你可以將其視為組件，放進您的組件目錄地址如下：
uniapp行為驗證壓縮包
vue行為驗證壓縮包
第二步 npm install crypto-js -S 然后復制以下代碼即可看到效果（如果您是vue 請執行 npm install axios crypto-js -S）
<template>
<view> <!-- mode取值為fiexd，pop 如果是pop 就會隱藏 需要您呼叫.show()方法 -->
<Verify @success="success" mode="fixed" captchaType="clickWord"
:imgSize="{ width: '330px', height: '155px' }" ref="verify">
<!-- captchaType是驗證方式：取值為blockPuzzle滑動clickWord字體依次點擊 imgSize圖片的大小物件-->
</Verify>
<button @click="useVerify">呼叫驗證組件</button>
</view>
</template>
<script>
//引入組件 需要您引入正確路徑 （資源包命名可能有所不同）
import Verify from "../../verify/verify.vue";
export default {
name: 'app',
components: {
Verify
},
methods: {
success(params) {
console.log(params)
// params 回傳的二次驗證引數, 和登錄引數一起回傳給登錄介面，方便后臺進行二次驗證
},
useVerify() {
this.$refs.verify.show()
}
}
}
</script>
</script>
<style>
</style>
附加和可能出現的有用資訊已添加注釋
其他有關uniapp的疑問或者此方法不理解的地方您可留言，我會盡快回復并幫您解決，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/25578.html
標籤：其他