目錄
一， vue-puzzle-vcode外掛程式
1、安裝vue-puzzle-vcode
2，實現**
3，效果圖
二， vue2-verify
三，vue-monoplasty-slide-verify
1，安裝
2，實現
3，效果圖
四、封裝元件
五、基於svg-captcha（推薦）
六、原生js
參考：
cnpm i -s vue-puzzle-vcode登入
此外，這裡還有一些屬性，比如寬，高等，見：
github：
vue2-verify的元件功能很全，包括5種驗證功能，如下：
常規驗證碼picture常規的驗證碼由數字和字母構成，使用者輸入不區分大小寫，可變形成漢字驗證。
運算驗證碼compute運算驗證碼主要通過給出數字的加減乘運算，填寫運算結果進行驗證。
滑動驗證碼slide通過簡單的滑動即可完成驗證，應用與移動端體驗很好。
拼圖驗證碼puzzle拼圖。
選字驗證碼pick通過按順序點選圖中的漢字完成驗證，ie瀏覽器要求9或以上。
如果需要定製化驗證碼，那麼可以選擇這個外掛程式，如果對驗證碼要求不高，使用vue-puzzle-vcode更方便一點
cnpm install -s vue-monoplasty-slide-verify
// main.js
import vue from 'vue';
import slideverify from 'vue-monoplasty-slide-verify';
vue.use(slideverify);
// template
}在父元件可以點我重新整理哦
這個體驗感覺不太好，尤其是重新整理背景圖時會有一段時間的空白，但好在它可以計算出驗證過程的耗時
不區分大小寫
元件：validatecode.vue
使用：
比對
}
效果一：
效果二：
1、koa2中安裝svg-captcha
cnpm i -s svg-captcha
2、koa2中生成驗證碼
const svgcaptcha = require('svg-captcha');
router.get('/getyzm', async (ctx, next) => = svgcaptcha.create()
ctx.session.captcha = text //將驗證碼結果存在session中
ctx.body =
})
3、前端顯示
html:
看不清楚
js:
var code; //在全域性 定義驗證碼
function createcode()
if (code.length != codelength)
checkcode.value = code;
}function validate() else if (inputcode != code) else
}
css:
.code
.unchanged
執行結果：
隨機驗證碼：0-9：
function createcode()
return code;
}
vue 實現滑塊驗證碼
圖一為拖拽前效果，圖二為拖拽後效果 一 新建檔案jcrange.vue，如下 1 模板 1 template 2 div class jc component range 3 div class jc range class rangestatus?success 4 i mousedown ran...
Vue 實現驗證碼輸入元件
a 採用自定義指令實現 正如模板 中展示的那樣，為每乙個input繫結了乙個v focus指令 directives 我們傳入乙個boolean值控制當前項是否獲得焦點。而boolean值是由 item 1 currentindex決定，因此我們只需要修改currentindex的值便可以實現自動換...
Vue實現隨機驗證碼功能
建立乙個名為sidentify.vue的子元件，放置在父元件中的資料夾如common中。s canvas s canvas width contentwidth height contentheight canvas div template export default 字型最小值 fontsiz...