长按按钮执行函数

在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"
/>

你可能感兴趣的:(typescript,vue.js,javascript)