vue使用自定义指令实现长按事件（适用于h5，pc）

场景：移动端，列表实现长按删除功能。

要求：长按tbs列表中的item删除该元素   项目技术栈，vue2+vant-ui

尝试 使用vant-ui气泡菜单。但是，其只支持点击时触发

以下使用vue自定义指令实现

1. 在src目录下创建自定义指令文件夹 directives

2 创建js文件并写入以下代码

import Vue from 'vue';
// 自定义指令长按触发回调函数
Vue.directive('longpress', {
  bind: function (el, binding, vNode) {
    if (typeof binding.value.callback !== 'function') {
      throw 'callback must be a function'
    }
    // 定义变量
    let pressTimer = null
    // 创建计时器（ 2秒后执行函数 ）
    let start = (e) => {
      if (e.type === 'click' && e.button !== 0) {
        return
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          handler(binding.value.params)
        }, 1000)
      }
    }
    // 取消计时器
    let cancel = (e) => {
      if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }
    // 运行函数
    const handler = (e,params) => {
      binding.value.callback(e, params); // 传递item参数
    };
    // 添加事件监听器
    el.addEventListener('mousedown', start)
    el.addEventListener('touchstart', start)//在移动端要考虑 touchstart，touchend 事件
    // 取消计时器
    el.addEventListener('click', cancel)
    el.addEventListener('mouseout', cancel)
    el.addEventListener('touchend', cancel)//在移动端要考虑 touchstart，touchend 事件
    el.addEventListener('touchcancel', cancel)//在移动端要考虑 touchstart，touchend 事件
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, {value}) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
})

考虑到，长按事件触发位置是在列表中，自定义指令需要接收一个回调函数和一个对象。并将这个对象当做该回调函数的参数

3，引入自定义指令

在main.js文件中引入该文件。

import "@/directives" //自定义指令

Vue.config.productionTip = false
Vue.component('TextTitle',TextTitle)
Vue.use(Vant)
new Vue({
    router: Router,
    render: h => h(App),
}).$mount('#app')

4，在页面中使用该自定义指令

<template>
    <van-tabs class="tabs" v-model="setActiveTab" @click="tabClick">
        <van-tab
            class="tab"
            v-for="(item, index) in list"
            :key="index + '-DY'"
            title-active-color="#5574FF"
        >
          <template #title>
            <div v-longpress="{callback:longpress,params:{item,index}}">{{ showDy(item) }}</div>
          </template>
        </van-tab>

      </van-tabs>

</template>

在标签中使用自定义指令 v-longpress

<div v-longpress="{callback:longpress,params:{item,index}}">{{ showDy(item) }}</div>

该指令接收一个对象，对象中的callback 是长按执行的回调参数。params是该回调函数执行时的参数。注：callback,params。字段不可变更。如若变更请改变自定义指令代码。params只能是对象。以本章为例：longpress函数需要在methods中

//该函数在methods中声明

longpress(item){
      let dyCode=this.list[item.index];
      let name = this.showDy(dyCode);
      Dialog.alert({
        closeOnClickOverlay:true,
        showCancelButton:true,
        title: '提示',
        message:`是否确认删除,"${name}"`,
      }).then(() => {
        if(dyCode.DY==0){
          Notify({message: '无单元不能删除', type: 'warning'})
        }else{
          this.list= this.list.filter((element)=>element.DY!=dyCode.DY);
          this.active = this.list.length - 1;
        }
      }).catch(() => {
        //取消功能
      })
    },