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");
    }
});
目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
JavaScript中的箭头函数:简洁的语法与this绑定
JavaScript中的箭头函数:简洁的语法与this绑定
310 184
|
2月前
|
前端开发 JavaScript
JavaScript中的箭头函数:简洁与this绑定
JavaScript中的箭头函数:简洁与this绑定
|
12月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
222 2
|
8月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
237 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
8月前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
11月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
345 4
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
11月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
240 0
|
JavaScript 前端开发
vue-day03 v-on事件处理,表单输入绑定
文章介绍了Vue.js中事件处理和表单输入绑定的使用。包括v-on指令监听事件、事件处理方法、内联处理器、访问原生DOM事件、事件修饰符、按键修饰符、系统修饰符、exact修饰符和鼠标按钮修饰符。同时,讲解了如何使用v-model实现单行文本、多行文本、复选框和单选按钮的双向数据绑定,并提供了修饰符的使用示例。这些特性使得Vue.js在处理表单输入和事件时更加灵活和方便。
vue-day03 v-on事件处理,表单输入绑定
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js

热门文章

最新文章