Vue.directive('longpress', { bind: function (el, binding, vNode) { // Define variable let pressTimer = null // Define funtion handlers // Create timeout ( run function after 1s ) let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // Execute something !!! }, 1000) } } // Cancel Timeout let cancel = (e) => { // Check if timer has a value or not if (pressTimer !== null) { clearTimeout(pressTimer) pressTimer = null } } // Add Event listeners el.addEventListener("mousedown", start); // Cancel timeouts if this events happen el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel); } })
接下来，我们需要添加一个函数来运行将传递给 longpress 指令的方法。
// Long Press vue directive Vue.directive('longpress', { bind: function (el, binding, vNode) { // Define variable let pressTimer = null // Define funtion handlers // Create timeout ( run function after 1s ) let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // Execute function handler() }, 1000) } } // Cancel Timeout let cancel = (e) => { // Check if timer has a value or not if (pressTimer !== null) { clearTimeout(pressTimer) pressTimer = null } } // Run Function const handler = (e) => { // Execute method that is passed to the directive binding.value(e) } // Add Event listeners el.addEventListener("mousedown", start); // Cancel timeouts if this events happen el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel); } })
现在我们可以在我们的Vue应用程序中使用该指令，该指令将正常工作，直到用户添加的值不是指令值中的函数。所以我们必须通过在发生这种情况时警告用户来防止这种情况。
要警告用户，我们将以下内容添加到bind函数：
// Make sure expression provided is a function if (typeof binding.value !== 'function') { // Fetch name of component const compName = vNode.context.name // pass warning to console let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be` if (compName) { warn += `Found in component '${compName}' ` } console.warn(warn) }
最后，这个指令也适用于触控设备。所以我们为 touchstart ， touchend ＆ touchcancel 添加事件监听器。
把所有东西放在一起：
Vue.directive('longpress', { bind: function (el, binding, vNode) { // Make sure expression provided is a function if (typeof binding.value !== 'function') { // Fetch name of component const compName = vNode.context.name // pass warning to console let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be` if (compName) { warn += `Found in component '${compName}' ` } console.warn(warn) } // Define variable let pressTimer = null // Define funtion handlers // Create timeout ( run function after 1s ) let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // Run function handler() }, 1000) } } // Cancel Timeout let cancel = (e) => { // Check if timer has a value or not if (pressTimer !== null) { clearTimeout(pressTimer) pressTimer = null } } // Run Function const handler = (e) => { binding.value(e) } // Add Event listeners el.addEventListener("mousedown", start); el.addEventListener("touchstart", start); // Cancel timeouts if this events happen el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel); el.addEventListener("touchend", cancel); el.addEventListener("touchcancel", cancel); } })
现在引用我们的Vue组件：
<template> <div> <button v-longpress="incrementPlusTen" @click="incrementPlusOne">{{value}}</button> </div> </template> <script> export default { data() { return { value: 10 } }, methods: { // Increment value plus one incrementPlusOne() { this.value++ }, // increment value plus 10 incrementPlusTen() { this.value += 10 } } } </script>
如果您希望了解有关自定义指令的更多信息，可以使用的钩子函数，可以传递给此钩子函数的参数，函数缩写。伟大的家伙@vuejs在解释它这里方面做得很好。