Vue自定义指令-滑动指令

简言

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

Vue指令的优点

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

            }

        }
)
    }

}
    

效果展示

• 左滑出现删除按钮，右滑隐藏
• 左滑超过五秒没点击自动隐藏
• 左滑并点击后触发隐藏

以上就是左滑指令的 demo，仅提供思路

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！