vue-mb-touch是一个vue的移动端的事件项目,内置了点击(press)事件，长按(press)事件
安装npminstallvue-mb-touch使用方法
安装引入在需要监听tap或者press的元素上添加v-touch指令，后面就可以像监听click事件一样使用v-on:tap="fn"的方式监听tap和press事件了示例<template><divv-touch.press.tap@tap="tap"@press="press"></div></template><scriptlang="ts">import{Component,Vue}from"vue-property-decorator";importvueMobileTouchfrom"vue-mb-touch";Vue.use(vueMobileTouch);@ComponentexportdefaultclassHomeextendsVue{publictap(){/**tap*/}publicpress(e:Event){/**press*/}publicdata(){return{};}}</script>````>开启代理模式````vue<template><ulv-touch.proxy@tap="tap($event)"><lidata-proxydata-index="1"></li><lidata-proxydata-index="2"></li><lidata-proxydata-index="3"></li></ul></template><scriptlang="ts">import{Component,Vue}from"vue-property-decorator";importvueMobileTouchfrom"vue-mb-touch";Vue.use(vueMobileTouch);@ComponentexportdefaultclassHomeextendsVue{publictap(e:event){constcurrentTarget=e.currentTargetasHTMLElement;console.log(currentTarget.tagName.toLowerCase());//liconsole.log(JSON.stringify(currentTarget.dataset));//{proxy:"",index:"1"}}publicdata(){return{};}}</script>全局配置在引入vue-mb-touch时，可以传入一个全局配置对象。该对象目前支持maxDistance与pressTime，maxDistance用于手指在屏幕上移动多长距离内可触发事件默认10，pressTime用于手机按住屏幕多长时间触发长按事件,默认650。具体操作如下：
importVuefrom'vue';importvueMobileTouchfrom"vue-mb-touch";Vue.use(vueMobileTouch,{maxDistance:10,pressTime:650});指令参数
参数名描述tap是否开启tap事件,默认不开启，但是在tap和press都不开启时，则自动开启 press 是否开启press事件，默认不开启stop是否阻止事件冒泡,默认不阻止prevent是否阻止游览器默认行为,默认不阻止passive是否为passive监听器,如果有该参数，则阻止游览器默认行为无效capture是否为捕获监听器,默认不是proxy是否开启事件代理模式,默认不开启,开启后台在需要触发事件的目标元素上添加 data-proxy即可注意如果是在vue封装的组件上使用v-touch指令,在监听事件时，需要加上native参数
评论