cct-touch

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类使用示例

    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指令

    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等修饰符
示例：

   <button v-touch:tap="callback">tap</button>
   <button v-touch:longtap="callback">longtap</button>
   <button v-touch:tap.self.stop="callback">self stop</button>
   <button v-touch:start="callback">touchstart</button>
   <button v-touch:end="callback">touchend</button>
   <button v-touch:cancel="callback">touchcancel</button>
   <button v-touch:move="callback">touchmove</button>

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

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

   <button v-touch-class="test">hover</button>