Vue插件之滑動(dòng)驗(yàn)證碼
更新時(shí)間：2022年04月22日 16:45:18 作者：博迪
這篇文章主要為大家詳細(xì)紹介紹了Vue插件之滑動(dòng)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue插件之滑動(dòng)驗(yàn)證碼的具體代碼，供大家參考，具體內(nèi)容如下
預(yù)覽
目前僅前端實(shí)現(xiàn)，支持移動(dòng)端滑動(dòng)事件。版本V1.0.5
github文檔地址
安裝
npm install --save vue-monoplasty-slide-verify
使用方法：
// main.js
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
// template
<slide-verify :l="42"
:r="10"
:w="310"
:h="155"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
:slider-text="text"
></slide-verify>
<div>{{msg}}</div>
// script
export default {
name: 'App',
data(){
return {
msg: '',
text: '向右滑',
}
},
methods: {
onSuccess(){
this.msg = 'login success'
},
onFail(){
this.msg = ''
},
onRefresh(){
this.msg = ''
}
}
}參數(shù)說(shuō)明：
props傳參（均為可選）
自定義回調(diào)函數(shù)：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue.js Router中嵌套路由的相關(guān)資料,所謂嵌套路由就是路由里面嵌套他的子路由,文章通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單的拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
Vue中Keep-Alive緩存組件使用語(yǔ)法及原理深度解析
keep-alive是vue中的內(nèi)置組件,能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM,這篇文章主要介紹了Vue中Keep-Alive緩存組件使用語(yǔ)法及原理,需要的朋友可以參考下2024-07-07
vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Ruoyi-Vue處理跨域問(wèn)題同時(shí)請(qǐng)求多個(gè)域名接口(前端處理方法)
跨域問(wèn)題一直都是很多人比較困擾的問(wèn)題,這篇文章主要給大家介紹了關(guān)于Ruoyi-Vue處理跨域問(wèn)題同時(shí)請(qǐng)求多個(gè)域名接口的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
Vue中虛擬DOM的簡(jiǎn)單實(shí)現(xiàn)
Vue中的虛擬DOM是通過(guò)JavaScript對(duì)象來(lái)描述真實(shí)DOM結(jié)構(gòu)的一種方式，本文將介紹Vue中虛擬DOM的簡(jiǎn)單實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的可以了解一下2023-05-05
Vue Vine實(shí)現(xiàn)一個(gè)文件中寫(xiě)多個(gè)組件的方法(最近很火)
Vue Vine提供了全新Vue組件書(shū)寫(xiě)方式,主要的賣(mài)點(diǎn)是可以在一個(gè)文件里面寫(xiě)多個(gè)vue組件,Vue Vine是一個(gè)vite插件,vite解析每個(gè)模塊時(shí)都會(huì)觸發(fā)插件的transform鉤子函數(shù),本文介紹Vue Vine是如何實(shí)現(xiàn)一個(gè)文件中寫(xiě)多個(gè)組件,感興趣的朋友一起看看吧2024-07-07
詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問(wèn)題
這篇文章主要介紹了詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
vite構(gòu)建vue3項(xiàng)目的全過(guò)程記錄
vite是VUE3創(chuàng)建項(xiàng)目的工具,項(xiàng)目大了之后,性能明顯優(yōu)于webpack,下面這篇文章主要給大家介紹了關(guān)于vite構(gòu)建vue3項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-01-01
vite打包出現(xiàn)?"default"?is?not?exported?by?"
這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問(wèn)題的解決辦法,文中通過(guò)代碼將解決的辦法介紹的非常詳細(xì),對(duì)同樣遇到這個(gè)問(wèn)題的朋友具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-06-06