vue绑定自定义事件 main.js-阿里云开发者社区

开发者社区> 佀无极> 正文

vue绑定自定义事件 main.js

简介: vue绑定自定义事件 main.js
+关注继续查看

vue绑定自定义事件 main.js

import './utils/touch'

touch.js

import Vue from 'vue'

function vueTouch(el, binding, type) {//触屏函数
    var _this = this;
    this.obj = el;
    this.binding = binding;
    this.touchType = type;
    this.vueTouches = { x: 0, y: 0 };//触屏坐标
    this.vueMoves = true;
    this.vueLeave = true;
    this.vueCallBack = typeof (binding.value) == "object" ? binding.value.fn : binding.value;
    this.obj.addEventListener("touchstart", function (e) {
        _this.start(e);
    }, false);
    this.obj.addEventListener("touchend", function (e) {
        _this.end(e);
    }, false);
    this.obj.addEventListener("touchmove", function (e) {
        _this.move(e);
    }, false);
};
vueTouch.prototype = {
    start: function (e) {//监听touchstart事件
        this.vueMoves = true;
        this.vueLeave = true;
        this.longTouch = true;
        this.vueTouches = { x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY };
        this.time = setTimeout(function () {
            if (this.vueLeave && this.vueMoves) {
                this.touchType == "longtap" && this.vueCallBack(this.binding.value, e);
                this.longTouch = false;
            };
        }.bind(this), 1000);
    },
    end: function (e) {//监听touchend事件
        var disX = e.changedTouches[0].pageX - this.vueTouches.x;//计算移动的位移差
        var disY = e.changedTouches[0].pageY - this.vueTouches.y;
        clearTimeout(this.time);
        if (Math.abs(disX) > 10 || Math.abs(disY) > 100) {//当横向位移大于10,纵向位移大于100,则判定为滑动事件
            this.touchType == "swipe" && this.vueCallBack(this.binding.value, e);//若为滑动事件则返回
            if (Math.abs(disX) > Math.abs(disY)) {//判断是横向滑动还是纵向滑动
                if (disX > 10) {
                    this.touchType == "swiperight" && this.vueCallBack(this.binding.value, e);//右滑
                };
                if (disX < -10) {
                    this.touchType == "swipeleft" && this.vueCallBack(this.binding.value, e);//左滑
                };
            } else {
                if (disY > 10) {
                    this.touchType == "swipedown" && this.vueCallBack(this.binding.value, e);//下滑
                };
                if (disY < -10) {
                    this.touchType == "swipeup" && this.vueCallBack(this.binding.value, e);//上滑
                };
            };
        } else {
            if (this.longTouch && this.vueMoves) {
                this.touchType == "tap" && this.vueCallBack(this.binding.value, e);
                this.vueLeave = false
            };
        };
    },
    move: function (e) {//监听touchmove事件
        this.vueMoves = false;
    }
};
Vue.directive("tap", {//点击事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "tap");
    }
});
Vue.directive("swipe", {//滑动事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "swipe");
    }
});
Vue.directive("swipeleft", {//左滑事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "swipeleft");
    }
});
Vue.directive("swiperight", {//右滑事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "swiperight");
    }
});
Vue.directive("swipedown", {//下滑事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "swipedown");
    }
});
Vue.directive("swipeup", {//上滑事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "swipeup");
    }
});
Vue.directive("longtap", {//长按事件
    bind: function (el, binding) {
        new vueTouch(el, binding, "longtap");
    }
});

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
10个最好的 JavaScript 动画库【值得收藏】
10个最好的 JavaScript 动画库【值得收藏】
9 0
谈谈前端水印实现的几种方式
谈谈前端水印实现的几种方式
38 0
你真的了解CSS3硬件加速吗?
你真的了解CSS3硬件加速吗?
33 0
HTML中的<meta/>标签还能这么玩???【居然能搞动画】
HTML中的<meta/>标签还能这么玩???【居然能搞动画】
6 0
12道 javaScript 经典逻辑题,是否承载着你的回忆
12道 javaScript 经典逻辑题,是否承载着你的回忆
5 0
02_Bootstrap起步2|学习笔记
快速学习 02_Bootstrap起步2
14 0
SpringBoot时间格式化的5种方法!(3)
SpringBoot时间格式化的5种方法!(3)
8 0
详解使用VueJS开发项目中的兼容问题
详解使用VueJS开发项目中的兼容问题
14 0
前后端分离 -- 深入浅出 Spring Boot + Vue 实现工程项目进度管理系统 Vue不过如此~
前后端分离 -- 深入浅出 Spring Boot + Vue 实现工程项目进度管理系统 Vue不过如此~
11 0
+关注
佀无极
脚踏实地,心存高远!
69
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载