移动端H5长按事件 vue自定义指令
import Vue from 'vue'
Vue.directive('longpress', function (el, binding){
var timer = null;
var start = function (e) {
// 如果是点击事件,不启动计时器,直接返回
if (e.type === 'click'){
return
}
if (timer == null){
// 创建定时器 ( 2s之后执行长按功能函数 )
timer = setTimeout(function () {
//执行长按功能函数
binding.value()
},2000)
}
}
var cancel = function () {
if (timer !== null){
clearTimeout(timer)
timer = null
}
} // 添加事件监听器
el.addEventListener("mousedown", start);
el.addEventListener("touchstart", start); // 取消计时器
el.addEventListener("click", cancel);
el.addEventListener("mouseout", cancel);
el.addEventListener("touchend", cancel);
el.addEventListener("touchcancel", cancel);
})
1.在src目录下 新建文件夹utils文件夹,然后新建derective.js,复制上方代码,粘贴到derective.js;
2.在main.js中引入 该自定义指令js
3.在html中可以这样使用即可
<h2 v-longpress="handleLongClick">测试长按事件是否生效</h2>
总结:支持移动端跟pc端
移动端H5长按事件 vue自定义指令的更多相关文章
- 【转】原生js实现移动端h5长按事件
$("#target").on({ touchstart: function(e) { // 长按事件触发 timeOutEvent = setTimeout(function() ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
- Vue自定义指令使用方法详解 和 使用场景
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
随机推荐
- log-structured-merge-trees
https://juejin.im/post/5bbbf7615188255c59672125 https://www.cnblogs.com/siegfang/archive/2013/01/12/ ...
- idea 出现 bootstrap.properties 中的内容不能识别
错误截图如下 依赖库引用问题 第一种: <dependency> <groupId>org.springframework.cloud</groupId> < ...
- git 本地删除修改文件后从远程拉取
单个文件 git checkout a.php 当前目录 git checkout .
- Nginx添加静态页面
1.编辑配置文件 sudo vim /etc/nginx/nginx.conf 在http {}中添加如下 server { listen 80; server_name localhost; loc ...
- 初识内存挂:VirtualNES金手指教程
一.什么VirtualNES?什么是金手指? VirtualNES是一个NES模拟器,用来运行.nes文件,即在电脑上玩当年小霸王游戏机上的游戏.而它内置了一个简单的Cheat Engine,称之为金 ...
- FastJson序列化时过滤字段(属性)的方法总结
FastJson序列化时(即转成JSON字符串时),可以过滤掉部分字段,或者只保留部分字段,方法有很多,下面举一些常用的方法. 方法一.FastJson的注解 @JSONField(serialize ...
- 【计算机视觉】OpenCV篇(10) - 模式识别中的模板匹配
什么是模式识别? 它指的是,对表征事物或现象的各种形式的信息进行处理和分析,从而达到对事物或现象进行描述.辨认.分类和解释的目的. 我们之所以可以很快辨别猫是猫.O不是0,就是因为在我们大脑中已经给猫 ...
- Serializable笔记
什么是序列化与反序列化? 把对象转换为字节序列的过程称为对象的序列化.把字节序列恢复为对象的过程称为对象的反序列化. 序列化的用途? 简单来说,是为了方便存储与传输. 存储:在很多应用中,需要对某些对 ...
- SGU 128. Snake --- 暴力枚举+并查集+贪心+计算几何
<传送门> 128. Snake time limit per test: 0.25 sec. memory limit per test: 4096 KB There are N poi ...
- Mysql Lua语言拼接
[1]Mysql Lua语言拼接实例 (1)基本语句 local sql = "select * from task_control where cycle_id = '" .. ...