Vue插件之滑動驗證碼
更新時間：2022年04月22日 16:45:18 作者：博迪
這篇文章主要為大家詳細紹介紹了Vue插件之滑動驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue插件之滑動驗證碼的具體代碼，供大家參考，具體內(nèi)容如下
預(yù)覽
目前僅前端實現(xiàn)，支持移動端滑動事件。版本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ù)說明：
props傳參（均為可選）
自定義回調(diào)函數(shù)：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue.js Router中嵌套路由的相關(guān)資料,所謂嵌套路由就是路由里面嵌套他的子路由,文章通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-06-06
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單的拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
keep-alive是vue中的內(nèi)置組件,能在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM,這篇文章主要介紹了Vue中Keep-Alive緩存組件使用語法及原理,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端省市區(qū)選擇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Ruoyi-Vue處理跨域問題同時請求多個域名接口(前端處理方法)
跨域問題一直都是很多人比較困擾的問題,這篇文章主要給大家介紹了關(guān)于Ruoyi-Vue處理跨域問題同時請求多個域名接口的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05
Vue中的虛擬DOM是通過JavaScript對象來描述真實DOM結(jié)構(gòu)的一種方式，本文將介紹Vue中虛擬DOM的簡單實現(xiàn)，具有一定的參考價值，感興趣的可以了解一下2023-05-05
Vue Vine實現(xiàn)一個文件中寫多個組件的方法(最近很火)
Vue Vine提供了全新Vue組件書寫方式,主要的賣點是可以在一個文件里面寫多個vue組件,Vue Vine是一個vite插件,vite解析每個模塊時都會觸發(fā)插件的transform鉤子函數(shù),本文介紹Vue Vine是如何實現(xiàn)一個文件中寫多個組件,感興趣的朋友一起看看吧2024-07-07
詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問題
這篇文章主要介紹了詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vite是VUE3創(chuàng)建項目的工具,項目大了之后,性能明顯優(yōu)于webpack,下面這篇文章主要給大家介紹了關(guān)于vite構(gòu)建vue3項目的相關(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/...問題的解決辦法,文中通過代碼將解決的辦法介紹的非常詳細,對同樣遇到這個問題的朋友具有一定的參考借鑒價值,需要的朋友可以參考下2024-06-06