当前位置:网站首页>Long press the button to execute the function
Long press the button to execute the function
2022-07-07 01:35:00 【Ah Liu】
stay utils Create under folder longPress.ts
import {
DirectiveOptions } from 'vue';
const longPress: DirectiveOptions = {
// bind: Call it once , The first time an instruction is bound to an element
// el: Element bound by instruction , Can be used for direct operation DOM.
// binding: An object . name: Instruction name ,value: Binding value of instruction
// vnode: Compile generated virtual nodes
bind: function (el, binding, vNode) {
// el Namely dom
if (typeof binding.value !== 'function') {
// eslint-disable-next-line
console.log('callback must be a function');
}
// Defining variables
let pressTimer: any = null;
// Operation function
const handler = (e: Event) => {
binding.value(e);
};
// Create timer (1 The function is executed in seconds )
const start = (e: any) => {
if (e.type === 'click') {
return;
}
if (pressTimer === null) {
pressTimer = setTimeout(() => {
handler(e);
}, 1000);
}
};
// Cancel the timer
const cancel = () => {
if (pressTimer !== null) {
clearTimeout(pressTimer);
pressTimer = null;
}
};
// Add event listener
el.addEventListener('mousedown', start);
// Cancel the timer
el.addEventListener('click', cancel);
el.addEventListener('mouseout', cancel);
},
// Triggered when the value passed in is updated
componentUpdated (el: any, {
value }) {
el.$value = value;
},
// When an instruction is unbound to an element , Remove event binding
unbind (el: any) {
el.removeEventListener('click', el.handler);
}
};
export default longPress;
Introduce and use in required documents
introduce
import longpress from '@/utils/longpress';
@Component({
components: {
},
directives: {
longpress
}
})
Use
<basic-button
v-longpress="handleLongMoveLeft"
type="info"
plain
icon="el-icon-arrow-left"
@click="moveLeft"
/>
边栏推荐
- How to manage distributed teams?
- The MySQL database in Alibaba cloud was attacked, and finally the data was found
- Taro2.* 小程序配置分享微信朋友圈
- Using the entry level of DVA in taro3.*
- AcWing 346. 走廊泼水节 题解(推公式、最小生成树)
- Make Jar, Not War
- Let's see through the network i/o model from beginning to end
- Instructions for using the domain analysis tool bloodhound
- 736. Lisp 语法解析 : DFS 模拟题
- LeetCode:1175. 质数排列
猜你喜欢
随机推荐
Js逆向——捅了【马蜂窝】的ob混淆与加速乐
字节P7专业级讲解:接口测试常用工具及测试方法,福利文
AcWing 1142. 繁忙的都市 题解(最小生成树)
Install Firefox browser on raspberry pie /arm device
c语言—数组
DS-5/RVDS4.0变量初始化错误
Dark horse notes - create immutable sets and streams
Taro2.* applet configuration sharing wechat circle of friends
2022 Google CTF segfault Labyrinth WP
The cost of returning tables in MySQL
Transplant DAC chip mcp4725 to nuc980
Today's question -2022/7/4 modify string reference type variables in lambda body
AI automatically generates annotation documents from code
Start from the bottom structure to learn the customization and testing of fpga---- FIFO IP
AcWing 1141. 局域网 题解(kruskalkruskal 求最小生成树)
云呐|工单管理办法,如何开展工单管理
Your cache folder contains root-owned files, due to a bug in npm ERR! previous versions of npm which
Meet in the middle
C语言实例_4
[case sharing] basic function configuration of network loop detection