vue自定义指令 v-longpress长按触发方法

vue自定义指令 v-longpress长按触发方法

新建一个vue2项目，在components里面新建一个longpress.vue文件
设置按钮 指令v-longpress:3000="longpress" ，3000是毫秒参数

src/components/longpress.vue

<template>
  <div class="box">
    <!-- 单位毫秒:3000  -->
    <button v-longpress:3000="longpress">长按</button>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    longpress(e) {
      console.log("长按指令生效--", e);
    },
  },
};
</script>
<style scoped></style>

长按js自定义指令：按下时长小于3000毫秒属于点击，大于等于3000毫秒属于长按

src/directive/modules/longpress.js

// 长按
const longpress = {

  bind: function (el, binding, vNode) {
    let s = binding.arg * 1 || 1000
    if (typeof binding.value !== 'function') {
      throw 'callback must be a function'
    }
    let num = 0
    // 定义变量
    let pressTimer = null
    // 创建计时器（ 2秒后执行函数 ）
    let start = (e) => {
      if (e.type === 'click' && e.button !== 0) return;
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          num += 1
          handler()
        }, s)
      }
    }

    // 取消计时器
    let cancel = (e) => {
      if (pressTimer !== null) {
        if (num === 0) {
          // 还未执行定时器
          binding.value(false)
        } else {
          // 执行过定时器
          num = 0
        }
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }
    // 运行函数
    const handler = (e) => {
      binding.value(true)
    }
    // 添加事件监听器
    el.addEventListener('mousedown', start)
    el.addEventListener('touchstart', start)
    // 取消计时器
    el.addEventListener('click', cancel)
    el.addEventListener('mouseout', cancel)
    el.addEventListener('touchend', cancel)
    el.addEventListener('touchcancel', cancel)
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, {
    value
  }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}
export default longpress

引入vue指令文件有两种方式：
方式一：使用require.context 自动导入，获取modules文件下的js文件，循环文件自动获取文件名当做指令名 ，xxx.default做为指令函数，每次循环使用 Vue.directive 注册指令
方式二：直接把每个文件引入 import longpress from './modules/longpress.js'

src/directive/index.js

import Vue from 'vue'
import copy from './modules/copy.js'
import debounce from './modules/debounce.js'
import longpress from './modules/longpress.js'

// 方式1
const files = require.context('./modules', false, /.+\.js$/)
// 按模块引入
// files.keys(): 打印出来为['./focus.js','/loadmore.js']
files.keys().forEach(fileName => {
  const directiveConfig = files(fileName) // 获取指令函数
  const directiveName = fileName // 获取指令名
    .replace(/^\.\//, '') // 去除开头的'./'
    .replace(/\.\w+$/, '') // 去除文件扩展名
  Vue.directive(directiveName, directiveConfig.default || directiveConfig)
})


// // 方式2
// Vue.directive('copy', copy)
// Vue.directive('debounce', debounce)
// Vue.directive('longpress', longpress)

在main.js里面引入import '@/directive/index.js' 文件
src/main.js

import '@/directive/index.js'

import App from './App.vue'
import Vue from 'vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')