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想使用移動端事件，這個方案還是可以頂替的。