vue v-longpress长按指令丨技术开发分享录

vue v-longpress长按指令

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"**思路:**\n\n- 创建一个计时器, 2 秒后执行函数\n- 当用户按下按钮时触发 mousedown 事件,启动计时器;用户松开按钮时调用 mouseout 事件。\n- 如果 mouseup 事件 2 秒内被触发,就清除计时器,当作一个普通的点击事件\n- 如果计时器没有在 2 秒内清除,则判定为一次长按,可以执行关联的函数。\n- 在移动端要考虑 touchstart,touchend 事件\n\ndirectives/longpress.js\n\n```\nconst longpress = {\n  bind: function (el, binding, vNode) {\n    if (typeof binding.value !== 'function') {\n      throw 'callback must be a function'\n    }\n    // 定义变量\n    let pressTimer = null\n    // 创建计时器( 2秒后执行函数 )\n    let start = (e) => {\n      if (e.type === 'click' && e.button !== 0) {\n        return\n      }\n      if (pressTimer === null) {\n        pressTimer = setTimeout(() => {\n          handler()\n        }, 2000)\n      }\n    }\n    // 取消计时器\n    let cancel = (e) => {\n      if (pressTimer !== null) {\n        clearTimeout(pressTimer)\n        pressTimer = null\n      }\n    }\n    // 运行函数\n    const handler = (e) => {\n      binding.value(e)\n    }\n    // 添加事件监听器\n    el.addEventListener('mousedown', start)\n    el.addEventListener('touchstart', start)\n    // 取消计时器\n    el.addEventListener('click', cancel)\n    el.addEventListener('mouseout', cancel)\n    el.addEventListener('touchend', cancel)\n    el.addEventListener('touchcancel', cancel)\n  },\n  // 当传进来的值更新的时候触发\n  componentUpdated(el, { value }) {\n    el.$value = value\n  },\n  // 指令与元素解绑的时候,移除事件绑定\n  unbind(el) {\n    el.removeEventListener('click', el.handler)\n  },\n}\n\nexport default longpress\n```\n\n在模板使用(index.vue)\n\n\n```html\n<template>\n  <button v-longpress=\"longpress\">长按</button>\n</template>\n\n<script> \nexport default {\n  methods: {\n    longpress () {\n      alert('长按指令生效')\n    }\n  }\n} \n</script>\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看