Vue滑塊解鎖組件使用方法詳解
更新時間：2022年03月07日 09:45:22 作者：皮蛋很白
這篇文章主要為大家詳細介紹了Vue滑塊解鎖組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue滑塊解鎖組件的使用，供大家參考，具體內容如下
依據 JS拖動滑塊驗證 開發(fā)的 Vue 滑塊解鎖組件。
<template>
? <div ref="wrap" class="slider-unlock">
? ? <div class="before">請按住滑塊，拖動到最右邊</div>
? ? <div ref="after" class="after">
? ? ? <div class="after-inner">{{ success?'驗證成功':'請按住滑塊，拖動到最右邊' }}</div>
? ? </div>
? ? <div ref="slider" class="slider" :class="{'is-success': success}" />
? </div>
</template>
<script>
export default {
? name: 'SliderUnlock',
? data() {
? ? return {
? ? ? success: false,
? ? ? clear: null,
? ? }
? },
? mounted() {
? ? this.init()
? },
? beforeDestroy() {
? ? this.clear && this.clear()
? },
? methods: {
? ? init() {
? ? ? // 獲取 dom
? ? ? const after = this.$refs.after
? ? ? const slider = this.$refs.slider
? ? ? const wrap = this.$refs.wrap
? ? ? // 設置after-inner的固定寬度
? ? ? after.childNodes[0].style.width = wrap.offsetWidth + 'px'
? ? ? // 滑塊移動最大位置
? ? ? const limit = wrap.offsetWidth - slider.offsetWidth
? ? ? // 實時計算滑塊的偏移量
? ? ? let offsetX
? ? ? // 點擊滑塊時的鼠標X位置
? ? ? let initX
? ? ? // 頁面鼠標移動事件
? ? ? const docMousemoveHandler = e => {
? ? ? ? // 獲取移動后鼠標實時位置
? ? ? ? const moveX = e.clientX
? ? ? ? // 計算滑塊應該移動的偏移量
? ? ? ? offsetX = moveX - initX
? ? ? ? // 限制上下限
? ? ? ? if (offsetX < 0) {
? ? ? ? ? offsetX = 0
? ? ? ? } else if (offsetX > limit) {
? ? ? ? ? offsetX = limit
? ? ? ? }
? ? ? ? // 移動滑塊
? ? ? ? slider.style.left = offsetX + 'px'
? ? ? ? // 修改高亮背景寬度
? ? ? ? after.style.width = offsetX + 'px'
? ? ? ? if (offsetX >= limit) {
? ? ? ? ? this.success = true
? ? ? ? ? this.$emit('success')
? ? ? ? ? document.removeEventListener('mousemove', docMousemoveHandler)
? ? ? ? ? slider.removeEventListener('mousedown', sliderMousedownHandler)
? ? ? ? }
? ? ? }
? ? ? // 頁面鼠標松開事件
? ? ? const docMouseupHandler = e => {
? ? ? ? // 解綁事件
? ? ? ? document.removeEventListener('mousemove', docMousemoveHandler)
? ? ? ? // 重置滑塊
? ? ? ? if (offsetX < limit) {
? ? ? ? ? slider.style.left = 0
? ? ? ? ? after.style.width = 0
? ? ? ? }
? ? ? }
? ? ? // 滑塊點擊事件
? ? ? const sliderMousedownHandler = e => {
? ? ? ? // 獲取鼠標位置
? ? ? ? initX = e.clientX
? ? ? ? // 綁定頁面的鼠標移動事件
? ? ? ? document.addEventListener('mousemove', docMousemoveHandler)
? ? ? }
? ? ? // 綁定滑塊點擊事件
? ? ? slider.addEventListener('mousedown', sliderMousedownHandler)
? ? ? // 頁面鼠標松開事件
? ? ? document.addEventListener('mouseup', docMouseupHandler)
? ? ? // 定義清理方法
? ? ? this.clear = () => {
? ? ? ? document.removeEventListener('mousemove', docMousemoveHandler)
? ? ? ? slider.removeEventListener('mousedown', sliderMousedownHandler)
? ? ? ? document.removeEventListener('mouseup', docMouseupHandler)
? ? ? }
? ? },
? },
}
</script>
<style lang="less" scoped>
.slider-unlock{
? height: 45px;
? background: #E1E1E1;
? border-radius: 4px;
? position: relative;
? overflow: hidden;
? border: 1px solid #CCCCCC;
? box-sizing: border-box;
? user-select: none;
? .before, .after {
? ? position: absolute;
? ? margin: -1px 0 0 -1px;
? ? top: 0;
? ? left: 0;
? ? z-index: 1;
? ? height: 100%;
? ? box-sizing: content-box;
? ? font-size: 14px;
? ? font-weight: bold;
? ? line-height: 43px;
? ? text-align: center;
? }
? .before {
? ? width: 100%;
? ? color: #333;
? ? padding: 0 1px 1px 0;
? }
? .after {
? ? width: 0;
? ? overflow: hidden;
? ? padding: 0 0 1px 0;
? ? &-inner {
? ? ? position: absolute;
? ? ? width:100%;
? ? ? height: 100%;
? ? ? color: #fff;
? ? ? background-color: #40C057;
? ? }
? }
? .slider{
? ? position: absolute;
? ? margin: -1px 0 0 -1px;
? ? top: 0;
? ? left: 0;
? ? z-index: 3;
? ? width: 70px;
? ? height: 45px;
? ? border: 1px solid #CCC;
? ? cursor: pointer;
? ? background: no-repeat center center #fff;
? ? background-image: url(~@/imgs/icon-allow-right.png);
? ? &.is-success {
? ? ? background-image: url(~@/imgs/icon-success.png);
? ? }
? }
}
</style>使用：
<SliderUnlock @success="handler" />
效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了Vite多環(huán)境配置項目高定制化能力詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue中抽離接口配置文件的問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了Vue如何基于vue-i18n實現多國語言兼容,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
最近嘗試上手Vue3+TS+Vite,對比起Vue2有些不適應,但還是真香,下面這篇文章主要給大家介紹了關于vue3+ts+vite2項目的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue中computed與methods的區(qū)別詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了vue實現聊天框自動滾動的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要為大家詳細介紹了Vue AST源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue3如何實現錨點定位點擊滾動高亮問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要為大家詳細介紹了vue實現靜態(tài)頁面點贊和取消點贊的功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
element中el-table中的el-input校驗的實現
本文主要介紹了element中el-table中的el-input校驗的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08