Vue插件之滑動驗證碼

更新時間：2022年04月22日 16:45:18 作者：博迪

這篇文章主要為大家詳細(xì)紹介紹了Vue插件之滑動驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue插件之滑動驗證碼的具體代碼，供大家參考，具體內(nèi)容如下

預(yù)覽

目前僅前端實(shí)現(xiàn)，支持移動端滑動事件。版本V1.0.5

安裝

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