长按按钮执行函数

在utils文件夹下创建longPress.ts

import {
     DirectiveOptions } from 'vue';

const longPress: DirectiveOptions = {
    
  // bind：只调用一次，指令第一次绑定到元素时调用
  // el：指令所绑定的元素，可以用来直接操作 DOM。
  // binding：一个对象。 name：指令名，value：指令的绑定值
  // vnode：编译生成的虚拟节点
  bind: function (el, binding, vNode) {
    
    // el就是dom
    if (typeof binding.value !== 'function') {
    
      // eslint-disable-next-line
      console.log('callback must be a function');
    }
    // 定义变量
    let pressTimer: any = null;
    // 运行函数
    const handler = (e: Event) => {
    
      binding.value(e);
    };
    // 创建计时器（1秒后执行函数 ）
    const start = (e: any) => {
    
      if (e.type === 'click') {
    
        return;
      }
      if (pressTimer === null) {
    
        pressTimer = setTimeout(() => {
    
          handler(e);
        }, 1000);
      }
    };
    // 取消计时器
    const cancel = () => {
    
      if (pressTimer !== null) {
    
        clearTimeout(pressTimer);
        pressTimer = null;
      }
    };
    // 添加事件监听器
    el.addEventListener('mousedown', start);
    // 取消计时器
    el.addEventListener('click', cancel);
    el.addEventListener('mouseout', cancel);
  },
  // 当传进来的值更新的时候触发
  componentUpdated (el: any, {
     value }) {
    
    el.$value = value;
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind (el: any) {
    
    el.removeEventListener('click', el.handler);
  }
};

export default longPress;

在需要的文件中引入并且使用
引入

import longpress from '@/utils/longpress';

@Component({
    
  components: {
    
    
  },
  directives: {
    
    longpress
  }
})

使用

<basic-button
  v-longpress="handleLongMoveLeft"
  type="info"
  plain
  icon="el-icon-arrow-left"
  @click="moveLeft"
/>