Vue自定义指令-滑动指令

原创

就叫7620521吧

修改于 2023-11-09 15:48:10

4620

修改于 2023-11-09 15:48:10

简言

Vue.js是一个轻量级的JavaScript框架，广泛用于构建用户界面。它提供了一套丰富的指令，帮助开发者快速构建交互式的Web应用程序。本文将介绍个人使用的滑动指令，并解释它们的用法和功能。大家可以根据具体的需求，并结合其他Vue特性和功能来实现更复杂的交互效果。

Vue指令的优点

简洁明了：Vue指令以v-开头，后跟指令名称，如v-bind、v-on等，语法简洁，易于理解和使用。
方便快捷：Vue指令可以快速创建和管理DOM元素，并且可以方便地绑定事件处理函数，大大减少了手动编写HTML和JavaScript代码的工作量。
响应式：Vue指令具有响应性，当数据发生变化时，指令会自动更新相关的DOM元素，无需手动更新页面。
可组合性：Vue指令可以组合使用，实现更复杂的功能。例如，可以使用v-bind指令绑定一个CSS样式对象，实现动态的样式修改。
自定义性：Vue指令可以自定义指令选项，通过定义指令的参数、更新、钩子等函数，实现自定义指令功能，满足项目对Vue指令的特殊需求。

代码解析三步走

函数接收一个dom元素和一个回调函数
监听触摸开始、结束，拿到期望的值
给个触发条件，上下/左右3或者触摸时间

var timer = null

// 写一个函数 接收一个dom元素和一个回调函数
function touchmove(dom, callback) {
    //起始
    let startX;
    let startY;
    let startTime;
    // 结束
    let endX;
    let endY;
    let endTime;
    // 移动
    let moveX;
    let moveY;
    let moveTime;
    
    // 监听触摸开始
    dom.addEventListener("touchstart", (e) => {
        // 获取开始触摸的时间 X和Y的位置
        startTime = new Date().getTime();
        startX = Math.round(e.touches[0].screenX);
        startY = Math.round(e.touches[0].screenY);
    },);
    
    // 监听触摸结束
    dom.addEventListener("touchend", (e) => {
        // 结束触摸时间 X和Y离开的位置
        endTime = new Date().getTime();
        endX = Math.round(e.changedTouches[0].screenX);
        endY = Math.round(e.changedTouches[0].screenY);
        // 算一下触摸的 上下/左右 的距离
        moveX = startX - endX;
        moveY = startY - endY;
        moveTime = endTime - startTime;
        
        // 给个条件 上下/左右30px或者触摸时间超过 500ms 
        
        if (Math.abs(moveY) > 30 || Math.abs(moveX) > 30 || moveTime > 500) {
            // 判断方向 触发回调函数并把数据对象传回
            if (Math.abs(moveX) > Math.abs(moveY)) {
                //左右
                moveX > 0
                    ? callback({ direction: "right", to: 'left', value: moveX })
                    : callback({ direction: "left", to: 'right', value: Math.abs(moveX) });
            } else {
                //上下
                moveY > 0
                    ? callback({ direction: "down", to: 'up', value: moveY })
                    : callback({ direction: "up", to: 'down', value: Math.abs(moveY) });
            }
        }
    },);
}


export default {
    mounted(el) {
        touchmove(el, (e) => {
            // 从右往左滑动
            if (e.to === 'left') {
                el.style.transform = `translateX(-${60}px)`;
                el.style.transition = `all 0.1s ease-in-out`;
                // 监听删除按钮元素的点击事件 
                el.childNodes[2].addEventListener('click', () => {
                    showHide()
                })
                // 超过五秒不点击 隐藏
                timer = setTimeout(() => {
                    el.style.transform = `translateX(${0}px)`;
                    el.style.transition = `all 0.1s ease-in-out`;
                }, 5000)
            }

            // 从左往右滑动
            if (e.to === 'right') {
                showHide()
            }

            // 清除定时器  隐藏删除按钮
            function showHide() {
                // 清除定时器
                clearTimeout(timer)
                el.style.transform = `translateX(${0}px)`;
                el.style.transition = `all 0.1s ease-in-out`;
            }
        })
    }
}