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