vue?實(shí)現(xiàn)滑動(dòng)塊解鎖示例詳解
更新時(shí)間：2022年08月19日 15:35:11 作者：一起去看星星吧
這篇文章主要為大家介紹了vue?實(shí)現(xiàn)滑動(dòng)塊解鎖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
引言
從0開(kāi)始，寫(xiě)一個(gè)登錄滑動(dòng)解鎖的功能。
首先，新創(chuàng)建一個(gè) vue 項(xiàng)目。 或者在已有的項(xiàng)目寫(xiě)也可以。 將無(wú)用的代碼刪一下。
下載需要用到的組件庫(kù)
1、下載 element-ui。
yarn add element-ui -S or npm i element-ui -S
2、 在main.js 中引入。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
+ import ElementUI from 'element-ui'
+ import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
+ Vue.use(ElementUI)
new Vue({
router,
store,
+ el: '#app',
render: h => h(App)
}).$mount('#app')
3、測(cè)試是否下載成功。
<template>
<div class="about">
+ <el-button type="primary">主要按鈕</el-button>
<h1>This is an about page</h1>
</div>
</template>
書(shū)寫(xiě)登錄頁(yè)面
頁(yè)面可以正常展示按鈕，說(shuō)明下載成功。可以開(kāi)始寫(xiě)代碼了。
寫(xiě)一個(gè)簡(jiǎn)單的登錄頁(yè)面。
Login.vue
template 結(jié)構(gòu)：
<template>
<div class="login-container">
<div class="login-header">
<h1>xxx系統(tǒng)</h1>
</div>
<div class="login-body">
<div class="login-form-container">
<el-form
ref="loginFormRef"
class="form-style"
:label-position="`right`"
:model="loginFormData"
status-icon
>
<el-form-item
name="username"
prop="username"
>
<el-input
v-model="loginFormData.username"
placeholder="請(qǐng)輸入用戶(hù)名"
prefix-icon="el-icon-user"
clearable
/>
</el-form-item>
<el-form-item
class="el-item-style"
name="password"
prop="password"
>
<!-- 密碼框 -->
<el-input
prefix-icon="el-icon-lock"
v-model="loginFormData.password"
:type="`${hasOpenEye? 'text':'password'}`"
placeholder="請(qǐng)輸入密碼">
<i
slot="suffix"
:class="[hasOpenEye ? 'el-icon-unlock' : 'el-icon-lock']"
style="font-size: 14px; cursor: pointer"
@click="hasOpenEye = !hasOpenEye"/>
</el-input>
</el-form-item>
<el-form-item class="el-item-style">
<el-button
:loading="false"
style="
width: 100%;
height: 46px;
line-height: 15px;
font-size: 23px;
"
type="primary"
@click="login"
>登錄</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
script 邏輯：
<script>
export default {
// 登錄表單數(shù)據(jù)
data () {
return {
loginFormData: {
username: "123232",
password: "21232"
},
hasOpenEye : false, // 是否顯示密碼
}
},
components: {},
methods: {
login () {},
},
}
</script>
style 樣式：
<style lang="less" scoped>
.login-container {
position: relative;
height: 100%;
width: 100%;
display: flex;
user-select: none;
flex-direction: column;
.login-header {
display: flex;
align-items: center;
padding-left: 50px;
cursor: pointer;
}
.login-footer {
display: flex;
justify-content: center;
align-items: center;
color: #322b34;
font-size: 12px;
}
.login-header,
.login-footer {
height: 10%;
}
.login-body {
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
flex: 1 1;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
.login-form-container {
width: 30%;
border: 1px solid mix(pink, #000, 80);
box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.3);
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.3),
rgba(0, 0, 0, 0.3)
);
padding: 20px 30px;
border-radius: 5px;
}
}
}
</style>
登錄頁(yè)面效果展示：
寫(xiě)滑動(dòng)解鎖組件
1、下載安裝包：
vue-monoplasty-slide-verify
2、導(dǎo)入到 main.js 中
import SlideVerify from 'vue-monoplasty-slide-verify'; Vue.use(SlideVerify);
3、新建一個(gè)文件component / verify.vue
template 模板：
<template>
<div>
<!-- title="滑塊驗(yàn)證碼" -->
<el-dialog
:visible.sync="dialogVisible"
:before-close="dialogBeforeClose"
:close-on-click-modal="false"
>
<div class="flex">
<slide-verify
ref="slideblock"
:w="fullWidth"
:h="fullHeight"
:accuracy="accuracy"
:slider-text="text"
:imgs="imgList"
@again="onAgain"
@fulfilled="onFulfilled"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
/>
</div>
</el-dialog>
</div>
</template>
script 代碼:
<script>
export default {
name: 'verify',
data() {
return {
dialogVisible: false,
fullWidth: 450,
fullHeight: 304,
msg: '',
text: '請(qǐng)向右滑動(dòng)滑塊完成驗(yàn)證',
// 精確度小，可允許的誤差范圍小；為1時(shí)，則表示滑塊要與凹槽完全重疊，才能驗(yàn)證成功。默認(rèn)值為5
accuracy: 3,
imgList: [
// 圖片的路徑：
require('../assets/3.jpg')
]
}
},
mounted() {},
methods: {
dialogBeforeClose() {
this.dialogVisible = false
},
onSuccess() {
console.log('驗(yàn)證通過(guò)')
this.msg = 'login success'
this.dialogVisible = false
this.$emit('verifySuccess')
this.$message.success("驗(yàn)證成功")
this.$router.push('/a')
},
onFail() {
console.log('驗(yàn)證不通過(guò)')
this.msg = '驗(yàn)證不通過(guò)'
this.$message.error('驗(yàn)證失敗')
},
onRefresh() {
console.log('點(diǎn)擊了刷新小圖標(biāo)')
this.msg = ''
},
onFulfilled() {
console.log('刷新成功啦！')
},
onAgain() {
console.log('檢測(cè)到非人為操作的哦！')
this.msg = 'try again'
// 刷新
this.$refs.slideblock.reset()
},
handleClick() {
// 父組件直接可以調(diào)用刷新方法
this.$refs.slideblock.reset()
console.log(23333);
}
}
}
</script>
style 樣式：
<style lang="less" scoped>
.flex{
display: flex;
align-items: center;
justify-content: center;
}
/deep/ .el-dialog {
width: 500px;
border-radius: 16px;
margin: auto;
}
/deep/ .el-dialog__header {
display: none;
}
/deep/ .slide-verify-slider {
border-radius: 33px;
}
/deep/ .slide-verify-slider-mask {
border-radius: 33px 0 0 33px;
}
</style>
將滑動(dòng)組件運(yùn)用到我們的 Login 組件中：
import verify from "../components/verify.vue";
export default {
components: {
verify
},
}
<template> <el-form> ...... </el-form> + <verify ref="verify"></verify> </template>
補(bǔ)充邏輯代碼
login () {
this.$refs.verify.dialogVisible = true
},
最終效果：
完成。
以上就是vue 實(shí)現(xiàn)滑動(dòng)塊解鎖示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue 滑動(dòng)塊解鎖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue路由切換之淡入淡出的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue路由切換之淡入淡出的簡(jiǎn)單實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問(wèn)題
這篇文章主要介紹了vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue異步更新機(jī)制及$nextTick原理的深入講解
最近在學(xué)習(xí)一些底層方面的知識(shí),所以想做個(gè)系列嘗試去聊聊這些比較復(fù)雜又很重要的知識(shí)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue異步更新機(jī)制及$nextTick原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
詳解Vue2如何監(jiān)聽(tīng)數(shù)組的變化
這篇文章主要來(lái)和大家詳細(xì)探討一下Vue2中是如何監(jiān)聽(tīng)數(shù)組的變化的,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
在日常業(yè)務(wù)開(kāi)發(fā)中我們會(huì)經(jīng)常封裝一些業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于Vue組件的實(shí)現(xiàn)原理,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue左右滑動(dòng)選擇日期組件封裝的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue.js中指令Directives，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
在vue-cli創(chuàng)建的項(xiàng)目中使用sass操作
這篇文章主要介紹了在vue-cli創(chuàng)建的項(xiàng)目中使用sass操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08