cct-touch 移动端touch事件/vue事件指令
1. 该项目导出两个模块一个是Touch类一个是vueTouch对象
2. Touch类是纯原生的事件类,它与技术框架没有关联完全独立,这是非常重要的,它将不限制框架,无论vue还是react或者原生的都可以使用
3. vueTouch对象主要是给vue使用的,按需加载,然后绑定全局的v-touch指令
4. 如果你用的是react也可以参考vueTouch写一个可以植入react的代码
安装
``
// npm
npm install --save cct-touch
// cnpm
cnpm install --save cct-touch
// yarn
yarn add cct-touch
`
支持的事件类型
1. tap
2. longtap
3. start(touchstart)
4. end(touchend)
5. move(touchmove)
6. cancel(touchcancel)
Touch类使用示例
`
js
import {Touch} from 'cct-touch';
const element = document.body;
//为元素初始化touch对象,以下配置项的数值均为默认值
const obj = new Touch(
element,// 需要绑定事件的dom元素
{
tapTime: 30,// 触发tap事件的最小时间,即touchend-touchstart执行的时间
longtapTime: 400,//触发longtap事件的最小时间,注意若触发了longtap则不会触发tap
moveTolerance: 20,// 触摸时允许移动的误差范围,tap longtap时如果移动移动范围走过这个值则不会触发这些事件,因为可能是想滑动,同时hoverClass也会判断这个移动范围,超出范围也不会添加hoverClass
hoverTime: 60,// hover模拟触发的最小时间,当触摸开始后延迟60毫秒判断是否添加hoverClass
hoverClass: '',//触发hover时添加的类名
});
// 绑定事件,第二个参数为可选参数
obj.tap(function(event){
// TODO
},{
self:false,// 是否仅当前元素触发事件
stop:false,// 是否阻止冒泡
prevent:false//是否阻止默认行为
});
`
vueTouch使用示例
使用了vueTouch后将绑定v-touch指令与v-touch-class指令
`
js
import Vue from 'vue';
import {vueTouch} from 'cct-touch';
// 绑定指令时的配置为全局配置,仅hoverClass可以通过v-touch-class为元素单独设置
Vue.use(vueTouch,{
tapTime: 30,
longtapTime: 400,
moveTolerance: 20,
hoverTime: 60,
hoverClass: '',
})
`
v-touch指令绑定事件
v-touch指令支持.stop .self .prevent等修饰符
示例:
`
html
`
v-touch-class指令 设置hover效果
v-touch-class用于指定模拟hover效果时添加的hoverClass类名
可以使用全局配置也可以通过该指定对指定的元素设置指定的hoverClass
示例:
`
html
``