vue-simple-verify實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼功能

更新時(shí)間：2024年06月14日 15:58:39 作者：一盤小菜er

登錄頁面經(jīng)常會需要滑動(dòng)驗(yàn)證碼的情況,使用vue插件vue-simple-verify就可以輕松實(shí)現(xiàn),下面小編給大家分享vue-simple-verify實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼功能,感興趣的朋友一起看看吧

安裝

在控制臺

npm install vue-simple-verify

注意：一定要用npm安裝，否則會出錯(cuò)

注冊組件

在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()即為驗(yàn)證成功后的方法，如需重置，this.$refs.verify.reset()

參數(shù)說明

在這里插入圖片描述

如：<vue-simple-verify ref=“verify” width=‘400’ @success=“successMethod” />

事件

在這里插入圖片描述

方法

在這里插入圖片描述

到此這篇關(guān)于滑動(dòng)驗(yàn)證碼的實(shí)現(xiàn)-vue-simple-verify的文章就介紹到這了,更多相關(guān)vue滑動(dòng)驗(yàn)證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue學(xué)習(xí)筆記之跨域的6種解決方案
在前后端分離項(xiàng)目中,跨域是一定會出現(xiàn)的問題,下面這篇文章主要給大家介紹了關(guān)于Vue學(xué)習(xí)筆記之跨域的6種解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-04-04
element的el-table中記錄滾動(dòng)條位置的示例代碼
這篇文章主要介紹了element的el-table中記錄滾動(dòng)條位置的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
通過Element ui往頁面上加一個(gè)分頁導(dǎo)航條的方法
這篇文章主要介紹了通過Element ui往頁面上加一個(gè)分頁導(dǎo)航條的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
uniapp微信小程序使用webview嵌套u(yù)niappH5并實(shí)現(xiàn)通信詳細(xì)步驟
在開發(fā)微信小程序的時(shí)候,我們有時(shí)候會遇到將H5頁面嵌入到小程序頁面中的情況,這篇文章主要給大家介紹了關(guān)于uniapp微信小程序使用webview嵌套u(yù)niappH5并實(shí)現(xiàn)通信的詳細(xì)步驟,需要的朋友可以參考下
2024-05-05
vue中循環(huán)多個(gè)li(表格)并獲取對應(yīng)的ref的操作代碼
我想要獲取每一個(gè)循環(huán)并獲取每一個(gè)li(或者其它循環(huán)項(xiàng))的ref,以便于后續(xù)的操作,接下來通過本文給大家分享vue中循環(huán)多個(gè)li(表格)并獲取對應(yīng)的ref的操作代碼,感興趣的朋友跟隨小編一起看看吧
2024-02-02
對Vue3中reactive的深入理解
這篇文章主要介紹了對Vue3中reactive的深入理解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
詳解vue-cli開發(fā)環(huán)境跨域問題解決方案
本篇文章主要介紹了vue-cli開發(fā)環(huán)境跨域問題解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-06-06
vue.js中npm安裝教程圖解
這篇文章主要介紹了vue.js中npm安裝教程圖解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-04-04
vuex在vite&vue3中的簡單使用說明
這篇文章主要介紹了vuex在vite&vue3中的簡單使用說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue 列表上下過渡效果的實(shí)例代碼
最近有個(gè)需求，一個(gè)列表上下移動(dòng)要有簡單過渡效果。本文通過實(shí)例代碼給大家介紹Vue 列表上下過渡效果,需要的朋友可以參考下
2019-06-06