Nerfing Powerful Megalomaniacs
    Wondering what’s next for npm?Check out our public roadmap! »

    cct-touch

    1.0.7 • Public • Published

    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>

    Install

    npm i cct-touch

    DownloadsWeekly Downloads

    11

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    13.7 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar