vue自定义长按指令
1.前言
在word中，当我们需要删除一大段文本的时候，我们按一下键盘上的退格键，就会删除一个字，当我们长按住退格键时，就会连续不停的删除，这就是键盘按键的长按功能。那么我们也想在网页中让一个按钮也具有“长按”和“单击”不同的功能，该怎样实现呢？下面我们采用vue自定义指令的方式，来实现一个长按指令。
2.原理
长按，即用户按下按钮并持续按住几秒钟，即触发长按功能。那么，要实现这样的功能关键点在于我们需要知道的是用户什么时候按下按钮和什么时候松开按钮。幸运的是：浏览器在当用户点击鼠标时提供给了我们两个事件： mousedown 和 mouseup。当用户按下鼠标时会触发 mousedown 事件，用户松开鼠标时会触发 mouseup 事件。有了这两个事件，我们只需这样做：
1.当mousedown 事件触发时，启动一个计时器，开始计时。
2.设定一个时间阈值，比如2秒。在时间阈值内如果 mouseup 事件被触发了，即认为这是一次普通的单击，不执行长按功能函数并清除定时器。反之，超出时间阈值后 mouseup 事件才被触发，即认为用户在长按按钮，此时执行长按功能函数。
3.实现
3.1 计时器变量
首先，我们定义一个变量timer，用于存储定时器，并设置初始值未null。
let timer = null
3.2 启动函数
该函数是当浏览器监听到mousedown事件触发后执行的回调函数，该函数主要作用是创建并启动定时器，并且在设定的时间阈值内如果mouseup还未触发，则执行长按功能函数。函数代码如下：
var start = function (e) {
// 如果是点击事件，不启动计时器，直接返回
if (e.type === 'click'){
return
}
if (timer == null){
// 创建定时器 ( 2s之后执行长按功能函数 )
timer = setTimeout(function () {
//执行长按功能函数
longFunc()
},2000)
}
}
3.3 取消函数
该函数是当浏览器监听到mouseup事件触发后执行的回调函数，该函数主要作用是清除定时器。函数代码如下：
var cancel = function () {
if (timer !== null){
clearTimeout(timer)
timer = null
}
}
3.4 设置事件监听器
设置事件监听器，用于监听mousedown、mouseup和click事件，分别执行不同的回调函数。
// 添加事件监听器
el.addEventListener("mousedown", start);
// 长按事件取消，取消计时器
el.addEventListener("click", cancel);
el.addEventListener("mouseout", cancel);
4. 定义vue指令
有了上面的工作后，我们就可以定义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("click", cancel);
el.addEventListener("mouseout", cancel);
})
代码中el表示指令绑定的元素，binding表示传递给指令的值，详细请参考官方文档自定义指令。
5. 使用指令
到这里，我们就可以在模板中愉快的使用指令啦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{value}}
<button @click="incrementPlusOne" v-longpress="incrementPlusTen">该按钮具有长按功能哦！！！</button>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
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("click", cancel);
el.addEventListener("mouseout", cancel);
})
new Vue({
el:"#app",
data(){
return{
value:10
}
},
methods: {
// 增加1
incrementPlusOne() {
this.value++
},
// 增加10
incrementPlusTen() {
this.value += 10
} }
})
</script>
</body>
</html>
6.适配移动端
其实，按钮长按功能在移动触屏终端远比PC端实用的多，要想让这个指令也适配移动触屏端，我们只需在监听一下移动端特有的触摸事件 touchstart、touchend 和 touchcancel 事件即可。
// 添加事件监听器
el.addEventListener("mousedown", start);
el.addEventListener("touchstart", start);
// 取消计时器
el.addEventListener("click", cancel);
el.addEventListener("mouseout", cancel);
el.addEventListener("touchend", cancel);
el.addEventListener("touchcancel", cancel);
（完）
vue自定义长按指令的更多相关文章
- vue 自定义拖拽指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- Vue 自定义图片懒加载指令v-lazyload
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- Vue -自定义指令&钩子函数
除了核心功能默认内置的指令,Vue也允许注册自定义指令 页面加载后,让文本框自动获取焦点,原生js做法是获取文本框元素后调用focus()方法,但Vue不建议手动操作DOM元素,所以此时要自定义指令 ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令报错：Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
随机推荐
- 【Visual Studio】关于vs 打开网站时报错 配置iis express失败 无法访问IIS元数据库...
关于vs 打开网站时报错 配置iis express失败 无法访问IIS元数据库... 我安装了vs2015,一开始创建项目,网站都没问题,有一次突然打开项目时报错,瞬间懵逼,我啥都没干啊!!! 网上 ...
- WampServer配置可局域网访问站点
一 WampServer3.1.7版本 二 需求:项目开发阶段,服务器还未购买,前端需要调用接口进行测试,于是想到了在本地搭设一个站点,可以局域网内访问 三 先为这个项目单独在本地设置一个端口,比如我 ...
- 【NOIP2009】道路游戏
Description 小新正在玩一个简单的电脑游戏. 游戏中有一条环形马路,马路上有 nn 个机器人工厂,两个相邻机器人工厂之间由一小段马路连接.小新以某个机器人工厂为起点,按顺时针顺序依次将这 n ...
- 【NOIP模拟赛】小奇的矩阵
[题目背景] 小奇总是在数学课上思考奇怪的问题. [问题描述] 给定一个n*m的矩阵,矩阵中的每个元素aij为正整数. 接下来规定 1.合法的路径初始从矩阵左上角出发,每次只能向右或向下走,终点为右下 ...
- SSH服务协议
1.SSH介绍: SSH 是Secure Shell Protocol 的简写,由IETF网络小组(Network Working Group)制定:在进行数据传输之前,SSH先对联机数据包通过加密技 ...
- Kubernetes网络分析之Flannel
Flannel是cereos开源的CNI网络插件,下图flannel官网提供的一个数据包经过封包.传输以及拆包的示意图,从这个图片中可以看出两台机器的docker0分别处于不同的段:10.1.20.1 ...
- 算法学习之剑指offer（四）
题目1 题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) /** public class TreeNode { int val = 0; Tree ...
- Mysql多数据库备份
备份数据脚本 #!/bin/bash # date是linux的一个命令 date [参数] [+格式] time=` date +%Y_%m_%d_%H_%M_%S ` # 备份输出路径 backu ...
- Jenkins基本使用
Jenkins安装 安装基本上属于傻瓜式安装了 选择安装路径不要包含中文 点击install 找到默认密码 选择插件安装 点击无,然后再选择安装 创建一个管理员 Jenkins配置任务 新建工程 输入 ...
- php函数fsockopen的使用
函数说明:fsockopen — 打开一个网络连接或者一个Unix套接字连接 语法: resource fsockopen ( string $hostname [, int $port = -1 [ ...