vue自定义tap指令及tap事件的实现-创新互联

1.Vue指令

　　Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,详细可以参见vue官网自定义指令一节(https://cn.vuejs.org/v2/guide/custom-directive.html).

2.v-tap指令实现

　　我个人的理解,编写指令即是在vue指令对象提供的钩子函数中做相应的逻辑处理,tap指令是在bind钩子函数中做相应的处理, 首先,要明白的是tap是为了处理click事件在iphone上的存在300ms的延时,这样使得连续点击很不流畅,tap通过移动端的touchstart事件和touchend事件判断移动距离为零的话,则触发绑定的函数,话不多说,上代码:

Vue.directive('tap',{
 bind(el, binding, vNode){
 let expression = binding.value;
 let handler = expression.name;
 let args = expression.args

 on(el, 'touchstart', (e)=>{
  
  let startX = e.changedTouches[0].clientX;
  let startY = e.changedTouches[0].clientY;

  once(el, 'touchend',(ev)=>{

  let disX = Math.abs(ev.changedTouches[0].clientX-startX);
  let disY = Math.abs(ev.changedTouches[0].clientY-startY);

  if(disX == 0 && disY ==0){
   handler(args);
  }
  })
 })
 }
})

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。