vue-touch不支持vue2.0的替换方法

当你想用vue-touch时，却发现官网这句话

Touch events plugin for Vue.js. This plugin does not support Vue 2.0 yet.

但是却找不到好的替换方案，只能自己硬着头皮上了。

我这边有一个不成熟的解决方案：

自己写v-touch指令

长按 press，向上 swipeup，向下 swipedown，向左swipeleft，向右 swiperight

使用 v-touch:swiperight="methodFunc"。

vue指令 touch 使用bind，

• 　　binding.arg 获得传入模式
• 　　el 监听绑定的事件
• 　　binding.value 获得传入的事件

通过对touchstart touchmove touchend 的判断，执行对应的事件。

main.js 引用

import Vue from 'vue'

import directives from './directives'

...
directives(Vue)

 

directives.js

export default(Vue) => {
    Vue.directive('touch', {
        bind: function (el, binding, vnode) {
            var touchType = binding.arg; //传入的模式 press swipeRight swipeLeft swipeTop swipeDowm Tap
            var timeOutEvent = 0;
            var direction = '';
            //滑动处理
            var startX, startY;

            //返回角度
            function GetSlideAngle(dx, dy) {
                return Math.atan2(dy, dx) * 180 / Math.PI;
            }

            //根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
            function GetSlideDirection(startX, startY, endX, endY) {
                var dy = startY - endY;
                var dx = endX - startX;
                var result = 0;

                //如果滑动距离太短
                if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
                    return result;
                }

                var angle = GetSlideAngle(dx, dy);
                if (angle >= -45 && angle < 45) {
                    result = 'swiperight';
                } else if (angle >= 45 && angle < 135) {
                    result = 'swipeup';
                } else if (angle >= -135 && angle < -45) {
                    result = 'swipedown';
                }
                else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
                    result = 'swipeleft';
                }
                return result;
            }


            el.addEventListener('touchstart', function (ev) {
                startX = ev.touches[0].pageX;
                startY = ev.touches[0].pageY;

                //判断长按
                timeOutEvent = setTimeout(() =>{
                    timeOutEvent = 0 ;
                    if(touchType === 'press'){
                        binding.value()
                    }
                } , 500);

            }, false);

            el.addEventListener('touchmove' , function (ev) {
                clearTimeout(timeOutEvent)
                timeOutEvent = 0;
            });

            el.addEventListener('touchend', function (ev) {
                var endX, endY;
                endX = ev.changedTouches[0].pageX;
                endY = ev.changedTouches[0].pageY;
                direction = GetSlideDirection(startX, startY, endX, endY);

                clearTimeout(timeOutEvent)

                switch (direction) {
                    case 0:

                        break;
                    case 'swipeup':
                        if(touchType === 'swipeup'){
                            binding.value()
                        }
                        break;
                    case 'swipedown':
                        if(touchType === 'swipedown'){
                            binding.value()
                        }
                        break;
                    case 'swipeleft':
                        if(touchType === 'swipeleft'){
                            binding.value()
                        }
                        break;
                    case 'swiperight':
                        if(touchType === 'swiperight'){
                            binding.value()
                        }
                        break;
                    default:
                }
            }, false);
        }
    })
}

以上方案还有待完善，但是对于遇到vue2.0想使用移动端事件，这个方案还是可以顶替的。