vue滑動解鎖組件使用方法詳解
更新時間:2022年03月03日 11:49:20 作者:qq_34096214
這篇文章主要為大家詳細介紹了vue滑動解鎖組件的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue滑動解鎖組件的使用,供大家參考,具體內容如下
這是一個pc端的滑動解鎖組件
效果圖:
話不多說,直接上代碼
html部分
<template> ? ? <div class="dragVerify"> ? ? ? ? <div class="spout" ref="spout"> ? ? ? ? ? ? <div ? ? ? ? ? ? ? ? class="slidingBlock" ? ? ? ? ? ? ? ? ref="slidingBlock" ? ? ? ? ? ? ? ? :style="{ left: `${place}%` }" ? ? ? ? ? ? ? ? @mousedown="mousedown($event)" ? ? ? ? ? ? ? ? :class="place < distance ? 'unfinished' : 'complete'" ? ? ? ? ? ? ></div> ? ? ? ? ? ? <div class="succeedBox" :class="place >= distance ? 'succeedText' : ''" :style="{ width: `${place}%` }"></div> ? ? ? ? </div> ? ? </div> </template>
js部分
export default { ? ? name: 'dragVerify', ? ? data() { ? ? ? ? return { ? ? ? ? ? ? place: 0, ? ? ? ? ? ? sliding: { ? ? ? ? ? ? ? ? isDown: true, ? ? ? ? ? ? ? ? X: 0 // 初始X值 ? ? ? ? ? ? }, ? ? ? ? ? ? move: { ? ? ? ? ? ? ? ? X: 0 // 移動X值 ? ? ? ? ? ? }, ? ? ? ? ? ? spoutW: 0, ? ? ? ? ? ? slidingBlockW: 0, ? ? ? ? ? ? distance: 1 // 要移動的距離 ? ? ? ? } ? ? }, ? ? mounted() {}, ? ? methods: { ? ? ? ? // 鼠標事件 ? ? ? ? mousedown(e) { ? ? ? ? ? ? if (this.place < this.distance) { ? ? ? ? ? ? ? ? this.sliding.isDown = true ? ? ? ? ? ? ? ? // 計算百分比 ? ? ? ? ? ? ? ? this.spoutW = this.$refs.spout.offsetWidth ? ? ? ? ? ? ? ? this.slidingBlockW = this.$refs.slidingBlock.offsetWidth ? ? ? ? ? ? ? ? this.distance = 100 - (this.slidingBlockW / this.spoutW) * 100 ? ? ? ? ? ? } ? ? ? ? ? ? this.sliding.X = e.x ? ? ? ? ? ? // 添加鼠標的移動事件 ? ? ? ? ? ? document.addEventListener('mousemove', e => { ? ? ? ? ? ? ? ? if (this.sliding.isDown) { ? ? ? ? ? ? ? ? ? ? this.move.X = e.x ? ? ? ? ? ? ? ? ? ? if (this.place >= this.distance) { ? ? ? ? ? ? ? ? ? ? ? ? this.place = this.distance ? ? ? ? ? ? ? ? ? ? } else if (this.place >= 0 && this.place < this.distance) { ? ? ? ? ? ? ? ? ? ? ? ? this.place = ((this.move.X - this.sliding.X) / this.spoutW) * 100 ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? if (this.place <= 0) { ? ? ? ? ? ? ? ? ? ? ? ? this.place = 0 ? ? ? ? ? ? ? ? ? ? ? ? document.removeEventListener('mousemove', null, false) ? ? ? ? ? ? ? ? ? ? ? ? return ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? e.preventDefault() ? ? ? ? ? ? }) ? ? ? ? ? ? // 松開鼠標 ? ? ? ? ? ? document.onmouseup = e => { ? ? ? ? ? ? ? ? if (this.place == this.distance) { ? ? ? ? ? ? ? ? ? ? this.$emit('setVerify', true) ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? this.sliding.isDown = false ? ? ? ? ? ? ? ? ? ? this.place = 0 ? ? ? ? ? ? ? ? ? ? this.$emit('setVerify', false) ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? } ? ? } }
css部分
.dragVerify { ? ? border: 1px solid #e1e1e1; ? ? height: 40px; ? ? background: #eeeeee; } .spout { ? ? line-height: 40px; ? ? height: 40px; ? ? /* text-align: center; */ ? ? position: relative; ? ? width: 293px; } .spout::before { ? ? content: '請按住滑塊,拖動到最右邊'; ? ? width: 233px; ? ? top: 0; ? ? right: 0; ? ? bottom: 0; ? ? color: #919593; ? ? font-size: 16px; ? ? text-align: center; ? ? position: absolute; } .succeedText::before { ? ? content: '驗證通過'; ? ? width: 233px; ? ? top: 0; ? ? right: 0; ? ? bottom: 0; ? ? color: #ffffff; ? ? font-size: 16px; ? ? text-align: center; ? ? position: absolute; } .succeedBox { ? ? color: #ffffff; ? ? font-size: 16px; ? ? text-align: center; ? ? line-height: 38px; ? ? height: 38px; ? ? position: absolute; ? ? top: 0; ? ? left: 0; ? ? right: 0; ? ? bottom: 0; ? ? background: #23b14d; ? ? z-index: 8; } .slidingBlock { ? ? width: 60px; ? ? /* height: 38px; */ ? ? height: calc(100% - 0.1rem); ? ? border: 1px solid #e1e1e1; ? ? border-top: none; ? ? /* border-bottom: none; */ ? ? border-left: none; ? ? background: #ffffff; ? ? position: absolute; ? ? top: 0; ? ? bottom: 0; ? ? left: 0; ? ? /* margin-left: -1px; */ ? ? cursor: move; ? ? z-index: 9; } .slidingBlock::after { ? ? content: ''; ? ? position: absolute; ? ? background-size: 100% 100%; ? ? background-repeat: no-repeat; ? ? width: 20px; ? ? height: 20px; ? ? left: 50%; ? ? top: 50%; ? ? margin-left: -10px; ? ? margin-top: -10px; } .unfinished::after { ? ? background-image: url(你的圖片); } .complete::after { ? ? background-image: url(你的圖片); }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vuex中如何getters動態(tài)獲取state的值
這篇文章主要介紹了Vuex中如何getters動態(tài)獲取state的值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預約掛號步驟詳情
這篇文章主要介紹了VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預約掛號步驟詳情,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-04-04vue?跳轉頁面$router.resolve和$router.push案例詳解
這篇文章主要介紹了vue?跳轉頁面$router.resolve和$router.push案例詳解,這樣實現了既跳轉了新頁面,又不會讓后端檢測到頁面鏈接不安全之類的,需要的朋友可以參考下2023-10-10解決vue組件沒顯示,沒起作用,沒報錯,但該顯示的組件沒顯示問題
這篇文章主要介紹了解決vue組件沒顯示,沒起作用,沒報錯,但該顯示的組件沒顯示問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09