vue實(shí)現(xiàn)登錄滑動(dòng)拼圖驗(yàn)證
更新時(shí)間：2022年03月03日 15:25:01 作者：心若向陽(yáng)(*￣︶￣)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄滑動(dòng)拼圖驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)登錄滑動(dòng)拼圖驗(yàn)證的具體代碼，供大家參考，具體內(nèi)容如下
一、安裝插件
npm install --save vue-monoplasty-slide-verify
二、main.js引入
import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼圖驗(yàn)證碼 Vue.use(SlideVerify)
三、組件中使用
html(自定義關(guān)閉按鈕，添加變量控制彈窗顯隱)
<!-- 拼圖驗(yàn)證碼 -->
<div v-show="flag" class="testCode">
? <p class="closeBtn"><i class="el-icon-close" @click="flag=!flag"></i></p>
? <slide-verify?
? ? :l="42"
? ? :r="20"
? ? :w="362"
? ? :h="140"
? ? slider-text="向右滑動(dòng)"
? ? @success="onSuccess"
? ? @fail="onFail"
? ? @refresh="onRefresh"
? ? :style="{width:'362px'}"
? ? class="slide-box"
? ? ref="slideBlock"
? ? v-show="flag"
? ></slide-verify>
</div>js
return {
?? ?msg: '',
? ? flag: false,
}
methods: {
?? ?// 拼圖成功
? ? onSuccess (){
? ? ? this.getLogin()
? ? },
? ? // 拼圖失敗
? ? onFail (){
? ? ? this.msg = ''
? ? },
? ? // 拼圖刷新
? ? onRefresh (){
? ? ? this.msg = ''
? ? },
? ? // 登錄請(qǐng)求接口
? ? getLogin () {
? ? ? const loginData = {
? ? ? ? account: '',
? ? ? ? phone: this.ruleForm.userName,
? ? ? ? // Password: sha3.sha3_256(md5(this.ruleForm.password)), // 加密
? ? ? ? password: this.ruleForm.password,
? ? ? ? email: '',
? ? ? ? accountType: 2, // 登錄類(lèi)型手機(jī)號(hào)
? ? ? ? checkCode: ''
? ? ? }
? ? ? // 接口
? ? ? userLogin(loginData)
? ? ? ? .then(res => {
? ? ? ? ? console.log(res)
? ? ? ? })
? ? ? ? .catch(res => {
? ? ? ? ? console.log(res)
? ? ? ? })
? ? },
? ? // 點(diǎn)擊登錄校驗(yàn)-拼圖出現(xiàn)
? ? submitForm (formName) {
? ? ? // 表單校驗(yàn)
? ? ? this.$refs[formName].validate((valid) => {
? ? ? ? // 驗(yàn)證通過(guò)
? ? ? ? if (valid) {
? ? ? ? ? // 拼圖出現(xiàn)
? ? ? ? ? this.flag = true
? ? ? ? } else {
? ? ? ? ? console.log('error submit!!')
? ? ? ? ? return false
? ? ? ? }
? ? ? })
? ? }
}四、效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何通過(guò)某個(gè)字段獲取詳細(xì)信息
這篇文章主要介紹了vue如何通過(guò)某個(gè)字段獲取詳細(xì)信息，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue3中的element-plus表格實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue3中的element-plus表格實(shí)現(xiàn)代碼,用組件屬性實(shí)現(xiàn)跳轉(zhuǎn)路由,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
前端elementUI?select選擇器實(shí)現(xiàn)遠(yuǎn)程搜索
這篇文章主要為大家介紹了前端使用elementUI?select選擇器實(shí)現(xiàn)遠(yuǎn)程搜索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
這篇文章主要介紹了vue中$refs的三種用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能
這篇文章主要為大家詳細(xì)介紹了vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
在之前的前端開(kāi)發(fā)中，為了實(shí)現(xiàn)我們的需求，通常采用的方案是通過(guò) JS/Jquery 直接操縱頁(yè)面的 DOM 元素，得益于 Jquery 對(duì)于 DOM 元素優(yōu)異的操作能力，我們可以很輕易的對(duì)獲取到的 DOM 元素進(jìn)行操作。這篇文章主要介紹了Vue 中 ref 的使用 ,需要的朋友可以參考下2019-04-04
本文是作者通過(guò)實(shí)際項(xiàng)目的優(yōu)化實(shí)踐進(jìn)行總結(jié)而來(lái)，希望讀者讀完本文，有一定的啟發(fā)思考，從而對(duì)自己的項(xiàng)目進(jìn)行優(yōu)化起到幫助2022-08-08
vue封裝全局彈窗警告組件this.$message.success問(wèn)題
這篇文章主要介紹了vue封裝全局彈窗警告組件this.$message.success問(wèn)題,具有很的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Vue如何設(shè)置全局css文件以及css組合器問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06