Vue插件之滑動(dòng)驗(yàn)證碼
本文實(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ù)說明:
props傳參(均為可選)
自定義回調(diào)函數(shù):
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09Ruoyi-Vue處理跨域問題同時(shí)請求多個(gè)域名接口(前端處理方法)
跨域問題一直都是很多人比較困擾的問題,這篇文章主要給大家介紹了關(guān)于Ruoyi-Vue處理跨域問題同時(shí)請求多個(gè)域名接口的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05Vue Vine實(shí)現(xiàn)一個(gè)文件中寫多個(gè)組件的方法(最近很火)
Vue Vine提供了全新Vue組件書寫方式,主要的賣點(diǎn)是可以在一個(gè)文件里面寫多個(gè)vue組件,Vue Vine是一個(gè)vite插件,vite解析每個(gè)模塊時(shí)都會(huì)觸發(fā)插件的transform鉤子函數(shù),本文介紹Vue Vine是如何實(shí)現(xiàn)一個(gè)文件中寫多個(gè)組件,感興趣的朋友一起看看吧2024-07-07詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問題
這篇文章主要介紹了詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04vite構(gòu)建vue3項(xiàng)目的全過程記錄
vite是VUE3創(chuàng)建項(xiàng)目的工具,項(xiàng)目大了之后,性能明顯優(yōu)于webpack,下面這篇文章主要給大家介紹了關(guān)于vite構(gòu)建vue3項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-01-01vite打包出現(xiàn)?"default"?is?not?exported?by?"
這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問題的解決辦法,文中通過代碼將解決的辦法介紹的非常詳細(xì),對同樣遇到這個(gè)問題的朋友具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-06-06