vue-simple-verify實現(xiàn)滑動驗證碼功能
登錄頁面經(jīng)常會需要滑動驗證碼的情況,使用vue插件vue-simple-verify就可以輕松實現(xiàn)
原作者github項目地址:https://github.com/guqingming/vue-simple-verify
效果圖:
安裝
在控制臺
npm install vue-simple-verify
注意:一定要用npm安裝,否則會出錯
注冊組件
在main.js中引入
import Vue from 'vue' import VueSimpleVerify from 'vue-simple-verify' import '../node_modules/vue-simple-verify/dist/vue-simple-verify.css' Vue.component('vue-simple-verify', VueSimpleVerify)
注意:main.js是全局引入方法,也可以在組件中按需引入
使用組件
<vue-simple-verify ref="verify" @success="successMethod" />
注意:successMethod()即為驗證成功后的方法,如需重置,this.$refs.verify.reset()
參數(shù)說明
如:<vue-simple-verify ref=“verify” width=‘400’ @success=“successMethod” />
事件
方法
到此這篇關(guān)于滑動驗證碼的實現(xiàn)-vue-simple-verify的文章就介紹到這了,更多相關(guān)vue滑動驗證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
通過Element ui往頁面上加一個分頁導(dǎo)航條的方法
這篇文章主要介紹了通過Element ui往頁面上加一個分頁導(dǎo)航條的方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05uniapp微信小程序使用webview嵌套uniappH5并實現(xiàn)通信詳細步驟
在開發(fā)微信小程序的時候,我們有時候會遇到將H5頁面嵌入到小程序頁面中的情況,這篇文章主要給大家介紹了關(guān)于uniapp微信小程序使用webview嵌套uniappH5并實現(xiàn)通信的詳細步驟,需要的朋友可以參考下2024-05-05vue中循環(huán)多個li(表格)并獲取對應(yīng)的ref的操作代碼
我想要獲取每一個循環(huán)并獲取每一個li(或者其它循環(huán)項)的ref,以便于后續(xù)的操作,接下來通過本文給大家分享vue中循環(huán)多個li(表格)并獲取對應(yīng)的ref的操作代碼,感興趣的朋友跟隨小編一起看看吧2024-02-02詳解vue-cli開發(fā)環(huán)境跨域問題解決方案
本篇文章主要介紹了vue-cli開發(fā)環(huán)境跨域問題解決方案,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-06-06