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
tap
longtap
self stop
touchstart
touchend
touchcancel
touchmove

`

v-touch-class指令 设置hover效果

v-touch-class用于指定模拟hover效果时添加的hoverClass类名
可以使用全局配置也可以通过该指定对指定的元素设置指定的hoverClass
示例：
`html
hover
``