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");
    }
});
目录
相关文章
|
3天前
VUE.初始化项目报错缺少core-js
VUE.初始化项目报错缺少core-js
12 0
|
22天前
|
JavaScript 前端开发
Vue 应用 main.js 里的源代码解析
Vue 应用 main.js 里的源代码解析
18 0
|
1月前
|
JavaScript
Vue的自定义事件是什么?如何使用?
Vue的自定义事件是什么?如何使用?
14 1
|
25天前
|
Web App开发 缓存 前端开发
VUE-CLI可选的配置文件vue.config.js
VUE-CLI可选的配置文件vue.config.js
16 0
|
2天前
|
JavaScript
除了`v-bind`指令,还有哪些方法可以在Vue中绑定属性和数据?
除了`v-bind`指令,还有哪些方法可以在Vue中绑定属性和数据?
7 0
|
2天前
|
JavaScript
在Vue中,如何使用`v-bind`指令将属性绑定到DOM元素上?
在Vue中,如何使用`v-bind`指令将属性绑定到DOM元素上?
9 3
|
6天前
|
资源调度 JavaScript 开发者
百度搜索:蓝易云【vue使用nuxt.js详情】
通过以上简要详情,你可以快速上手Nuxt.js,并利用其强大的服务端渲染能力构建通用、高性能的Vue.js应用。买CN2云服务器,免备案服务器,高防服务器,就选蓝易云。百度搜索:蓝易云
21 8
|
17天前
|
Web App开发 JavaScript 前端开发
构建现代Web应用:Vue.js与Node.js的完美结合
在当今快速发展的Web技术领域,选择合适的技术栈对于开发高效、响应迅速的现代Web应用至关重要。本文深入探讨了Vue.js和Node.js结合使用的优势,以及如何利用这两种技术构建一个完整的前后端分离的Web应用。不同于传统的摘要,我们将通过一个实际的项目示例,展示从搭建项目架构到实现具体功能的整个过程,着重介绍了Vue.js在构建用户友好的界面方面的能力,以及Node.js在处理服务器端逻辑和数据库交互中的高效性。通过本文,读者不仅能够理解Vue.js与Node.js各自的特点,还能学习到如何将这两种技术融合应用,以提升Web应用的开发效率和用户体验。
|
22天前
|
JavaScript 网络架构
Vue 应用里 main.js 的作用
Vue 应用里 main.js 的作用
50 0
|
25天前
|
JavaScript
Vue3 + Typescript + Node.js 搭建elementUI使用环境
Vue3 + Typescript + Node.js 搭建elementUI使用环境
14 0

相关产品

  • 云迁移中心