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ù)說明：
props傳參（均為可選）
自定義回調(diào)函數(shù)：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue.JS入門教程之事件監(jiān)聽,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題
當(dāng)頁面數(shù)據(jù)過多,前端渲染大量的DOM時(shí),會(huì)造成頁面卡死問題,本文主要介紹了element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
vue2.6.10+vite2開啟template模板動(dòng)態(tài)編譯的過程
這篇文章主要介紹了vue2.6.10+vite2開啟template模板動(dòng)態(tài)編譯,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
這篇文章主要給大家介紹了關(guān)于vue3中使用codemirror的詳細(xì)教程,CodeMirror是一款功能強(qiáng)大的代碼高亮插件,他不僅提供了高亮功能,其豐富的方法屬性也封裝了縮進(jìn)、自動(dòng)換行、獲取編輯文本、設(shè)置編輯文本、回退功能等多種實(shí)用效果,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于vue的ssr服務(wù)端渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue項(xiàng)目中全局引入1個(gè).scss文件的問題解決
這篇文章主要跟大家介紹了vue項(xiàng)目中全局引入1個(gè).scss文件的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
大家在做前端項(xiàng)目的時(shí)候,大部分頁面, 游客都可以直接訪問 , 如遇到 需要登錄才能進(jìn)行的操作,頁面將提示并跳轉(zhuǎn)到登錄界面,那么如何才能實(shí)現(xiàn)頁面攔截并跳轉(zhuǎn)到對應(yīng)的登錄界面呢,本文小編就來給大家介紹一下Vue實(shí)現(xiàn)頁面訪問攔截的方法,需要的朋友可以參考下2023-08-08
vue 實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法
下面小編就為大家分享一篇vue 實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue $router.push打開新窗口的實(shí)現(xiàn)方法
在Vue中,$router.push方法默認(rèn)不支持在新窗口中打開頁面,但通過結(jié)合window.open方法和$router.resolve方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09
這篇文章主要介紹了Vue組件通信方法案例總結(jié),本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09