热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue手势组件教程

最近需要使用手指捏合扩大的手势操作,找了几个组件,要么对Vue适配不好,要么量级太大,决定自己手写手势操作。项目与效果预览思路直接在DOM上绑定touchstart、touchmove、touchend不仅要绑定这几个事件,而且用在

前言

最近需要使用手指捏合扩大的手势操作,找了几个组件,要么对 Vue 适配不好,要么量级太大,决定自己手写手势操作。

思路

直接在 DOM 上绑定 touchstarttouchmovetouchend 不仅要绑定这几个事件,而且用在其他项目还不好复用。所以用 Vue 自定义指令比较合适,指令还可以封装成插件,再使用 npm 托管,这样随时随地都可以使用了。

Vue 自定义指令

Vue 官网就有 自定义指令 的教程,摘取我们需要的关键代码。

Vue.directive('pinch', {  // 只调用一次,指令第一次绑定到元素时调用
  bind (el, binding)  {    // el:指令所绑定的元素,可以用来直接操作 DOM
    // binding.value():运行添加到指令的回调方法

  }
}) 

多点触控

实现捏合手势,必然是多根手指操作,因此使用 touch 的多点触控,就可以拿到多个触控点的位置了。再通过判断两点 touchstarttouchend 前的距离偏差,就可以判断出是捏合手势,还是放大手势了。关键代码如下:

let touchFlag = false;let touchInitSpacing = 0;let touchNowSpacing = 0;

el.addEventListener('touchstart',(e)=>{    if(e.touches.length>1){
        touchFlag = true;
        touchInitSpacing = Math.sqrt((e.touches[0].clientX-e.touches[1].clientX)**2 +(e.touches[1].clientY-e.touches[1].clientY)**2);
    }else{
        touchFlag = false;
    }
});

                
el.addEventListener('touchmove',(e)=>{    if(e.touches.length>1&&touchFlag){
        touchNowSpacing = Math.sqrt((e.touches[0].clientX-e.touches[1].clientX)**2 +(e.touches[1].clientY-e.touches[1].clientY)**2);
    }
});

el.addEventListener('touchend',()=>{    if(touchFlag){
        touchFlag = false;        if(touchInitSpacing-touchNowSpacing>0){
            binding.value('pinchin');
        }else{
            binding.value('pinchout');
        }
    }
}); 

使用指令

手势逻辑写入自定义指令,就可以直接使用了。

 
new Vue({  methods: {      pinchCtrl: function (e) {        
          if(e==='pinchin'){              console.log('捏合')
          }          if(e==='pinchout'){              console.log('扩大');
          }
      }
  }
}) 

总结

使用 Vue 自定义指令完成手势操作并不复杂,同时将该逻辑封装成组件量级很轻。

组件源码

点此 查看完整源码。

使用该组件

如果该组件对你有所帮助,可以通过 npm 的方式进行安装:

npm i vue-pinch --save 

更多组件

create-picture:该组件提供了 canvas 的图片绘制与文本绘制功能,使用同步的语法完成异步绘制,简化原生 canvas 绘制语法。

推荐教程:《JS教程》

以上就是Vue 手势组件教程的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 深入解析Java SE、Java EE和Java Web的核心知识体系
    通过一系列图表全面解析Java SE、Java EE与Java Web的核心知识体系,帮助开发者快速掌握这些关键技术领域的要点。 ... [详细]
  • 本文探讨了如何使用Scrapy框架构建高效的数据采集系统,以及如何通过异步处理技术提升数据存储的效率。同时,文章还介绍了针对不同网站采用的不同采集策略。 ... [详细]
  • 使用CorelDRAW X7轻松绘制卡通风格杯子教程
    本文将引导您通过CorelDRAW X7软件,利用贝塞尔工具和交互式填充功能,创作出一个既可爱又生动的卡通杯子。我们将详细介绍每个步骤,帮助您掌握绘制技巧。 ... [详细]
  • egg实现登录鉴权(七):权限管理
    权限管理包含三部分:访问页面的权限,操作功能的权限和获取数据权限。页面权限:登录用户所属角色的可访问页面的权限功能权限:登录用户所属角色的可访问页面的操作权限数据权限:登录用户所属 ... [详细]
  • 本文介绍了用户界面(User Interface, UI)的基本概念,以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件,以及它与其他UI控件和业务逻辑的关系。 ... [详细]
  • 本文探讨了线性表中元素的删除方法,包括顺序表和链表的不同实现策略,以及这些策略在实际应用中的性能分析。 ... [详细]
  • 本文深入解析宋代著名词人宋方君的作品《风流子》,通过细腻的译文和独到的赏析,带领读者走进词人的内心世界,感受其独特的艺术魅力。 ... [详细]
  • 本文将详细介绍如何在Adobe Illustrator中实现仅移动一个对象以完成对齐,同时确保另一个对象保持原位不变的方法。通过具体的操作步骤,帮助设计师们更加高效地完成设计任务。 ... [详细]
  • Python网络编程:深入探讨TCP粘包问题及解决方案
    本文详细探讨了TCP协议下的粘包现象及其产生的原因,并提供了通过自定义报头解决粘包问题的具体实现方案。同时,对比了TCP与UDP协议在数据传输上的不同特性。 ... [详细]
  • 实现Win10与Linux服务器的SSH无密码登录
    本文介绍了如何在Windows 10环境下使用Git工具,通过配置SSH密钥对,实现与Linux服务器的无密码登录。主要步骤包括生成本地公钥、上传至服务器以及配置服务器端的信任关系。 ... [详细]
  • PHP中Smarty模板引擎自定义函数详解
    本文详细介绍了如何在PHP的Smarty模板引擎中自定义函数,并通过具体示例演示了这些函数的使用方法和应用场景。适合PHP后端开发者学习。 ... [详细]
  • 本文探讨了在无法使用个人身份信息的情况下,利用他人(如网络上公开的个人信息)注册游戏账号的行为及其潜在的法律和道德问题。 ... [详细]
  • 本文由chszs撰写,详细介绍了Apache Mina框架的核心开发流程及自定义协议处理方法。文章涵盖从创建IoService实例到协议编解码的具体步骤,适合希望深入了解Mina框架应用的开发者。 ... [详细]
  • 本题提供了一个区间数组 intervals,其中每个区间 intervals[i] 包含两个整数 [starti, endi],并且所有 starti 值各不相同。任务是找到每个区间的右侧区间,即存在一个区间 j 满足 startj >= endi 并且 startj 是尽可能小的。返回一个数组,该数组包含每个区间右侧区间的索引;如果没有合适的右侧区间,则返回 -1。 ... [详细]
  • 本文介绍了使用Python和C语言编写程序来计算一个给定数值的平方根的方法。通过迭代算法,我们能够精确地得到所需的结果。 ... [详细]
author-avatar
手机用户2502930273
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有