你有没有想过在你的Vue应用程序中按住一个按钮几秒钟来执行某个功能？您是否曾想在您的应用程序上创建一个按钮，只需按一下（或按住按钮的整个输入）即可清除单个输入？如果您曾经有过这些想法，那太好了，我也有。那么恭喜您阅读本文。本文将解释如何通过按下（或按住）按钮来执行功能和删除输入。首先，我将解释如何在VanillaJS中实现这一点。然后，为它创建一个Vue指令。那么，让我们开始吧。原理为了实现长按，用户需要按住按钮几秒钟。要在代码中复制这一点，我们需要在按下鼠标“单击”按钮时进行监听，为我们希望用户在执行该功能之前按住按钮的任何时间启动一个计时器，并在设置时间后执行该功能。很简单的！但是，我们需要知道用户何时按下按钮。怎么做当用户单击按钮时，在单击事件之前会触发另外两个事件：mousedown和mouseup。当用户按下鼠标按钮时调用mousedown事件，当用户释放按钮时调用mouseup事件。我们需要做的就是：在mousedown事件发生后启动定时器。在2秒标记之前触发mouseup事件后，此计时器将被清除并且不会执行该功能。即完全点击事件。只要计时器在到达那个时间之前没有被清除，我们就会看到mouseup事件没有被触发——我们可以说用户没有释放按钮。所以它被认为是长按，然后我们可以继续执行上述功能。动手让我们深入研究代码并完成这项工作。首先，我们必须定义3个东西，即：一个变量用于存储定时器。start函数启动定时器。取消函数取消计时器变量。这个变量基本上保存了setTimeout的值，所以我们可以在mouseup事件发生时取消它。让pressTimer=null；我们将变量设置为null以便我们可以检查变量以了解当前是否有活动计时器，然后才能取消它。启动函数该函数由setTimeout组成，它基本上是Javascript中的一个方法，允许我们在函数中声明的特定持续时间后执行函数。请记住，在创建单击事件的过程中，会触发两个事件。但是我们需要启动定时器的是mousedown事件。所以如果是点击事件我们就不需要启动定时器了。//创建超时（1秒后运行函数）letstart=(e)=>{//确保事件触发器不是点击事件if(e.type==='click'&&e.button!==0）{返回；}//在开始另一个if(pressTimer===null){pressTimer=setTimeout(()=>{//Executesoemthing!!!},1000)}}//确保我们当前没有运行setTimeout//之前cancelfunction这个函数基本上就是顾名思义，取消调用start函数时创建的setTimeout。要取消setTimeout，我们将使用javascript中的clearTimeout方法，它基本上清除使用setTimeout()设置的定时器方法。在使用clearTimeout之前，我们首先需要检查pressTimer变量是否设置为null。如果它不设置为空，则表示有一个活动计时器。因此，我们需要通过将pressTimer变量设置为null来清除计时器。letcancel=(e)=>{//检查计时器是否有值if(pressTimer!==null){clearTimeout(pressTimer)pressTimer=null}}一旦mouseup事件被触发，这个函数就会被调用。设置触发器所需要做的就是将事件侦听器添加到要添加长按效果的按钮。addEventListener("鼠标按下",开始);addEventListener("点击",取消);总而言之，我们有：//DefinevariableletpressTimer=null;//创建超时（1秒后运行函数）letstart=(e)=>{if(e.type==='click'&&e.button!==0){return;}if(pressTimer===null){pressTimer=setTimeout(()=>{//执行某事!!!},1000);}}//取消Timeoutletcancel=(e)=>{//检查定时器是否有值if(pressTimer!==null){clearTimeout(pressTimer);按定时器=空；}}//选择ID为longPressButtonlet的元素el=document.getElementById('longPressButton');//添加事件侦听器sel.addEventListener("mousedown",start);//如果发生此事件则取消超时nel.addEventListener("click",取消);el.addEventListener("mouseout",取消);将其全部包装在Vue指令中创建Vue指令时，Vue允许我们在组件上全局或本地定义指令，但在本文中我们将使用全局路由。让我们构建执行此操作的指令。首先，我们必须声明自定义指令的名称。vue.directive('longpress',{}这基本上注册了一个名为v-longpress的全局自定义指令。接下来，我们添加带有一些参数的绑定钩子函数，这允许我们引用元素指令绑定，获取通过给指令一个值并标识使用它的组件。Vue.directive('longpress',{bind:function(el,binding,vNode){}}接下来，我们在绑定函数中添加我们的长按javascript代码。Vue.directive('longpress',{bind:function(el,binding,vNode){//定义变量letpressTimer=null//定义函数处理程序//创建超时（1s后运行函数）letstart=(e)=>{if(e.type==='click'&&e.button!==0){return;}if(pressTimer===null){pressTimer=setTimeout(()=>{//执行一些事情！!},1000)}}//取消超时letcancel=(e)=>{//检查定时器是否有值if(pressTimer!==null){clearTimeout(pressTimer)pressTimer=null}}//添加事件侦听器el.addEventListener("mousedown",start);//如果此事件发生则取消超时el.addEventListener("click",cancel);el.addEventListener("mouseout",cancel);}})接下来，我们需要添加一个函数来运行将传递给longpress指令的方法//长按vuedirectiveVue.directive('longpress',{bind:function(el,binding,vNode){//定义变量letpressTimer=null//定义函数处理程序//创建超时（1s后运行函数）让开始=(e)=>{if(e.type==='click'&&e.button!==0){return;}if(pressTimer===null){pressTimer=setTimeout(()=>{//Executefunctionhandler()},1000)}}//取消超时letcancel=(e)=>{//检查定时器是否有值if(pressTimer!==null){clearTimeout(pressTimer)pressTimer=null}}//RunFunctionconsthandler=(e)=>{//执行传递给指令的方法binding.value(e)}//添加事件监听器el.addEventListener("鼠标按下",开始);//如果此事件发生则取消超时el.addEventListener("点击",取消);埃尔。addEventListener("鼠标移出",取消);}})现在我们可以在我们的Vue应用程序中使用这个指令，并且该指令将正常工作，直到用户在指令值中添加一个不是函数的值，所以我们必须在发生这种情况时通过警告用户来防止这种情况。为了警告用户，我们将以下内容添加到绑定函数中：//确保提供的表达式是一个函数if(typeofbinding.value!=='function'){//获取组件的名称constcompName=vNode.context.name//向控制台传递警告letwarn=`[longpress:]providedexpression'${binding.expression}'不是一个函数，但必须是`if(compName){warn+=`Foundincomponent'${compName}'`}console.warn(warn)}最后，这个指令也适用于触摸设备。所以我们为touchstart、touchend和touchcancel添加了事件监听器。把所有东西放一起：Vue.directive('longpress',{bind:function(el,binding,vNode){//确保提供的表达式是一个函数if(typeofbinding.value!=='function'){//获取组件名称constcompName=vNode.context.name//将警告传递给控制台letwarn=`[longpress:]providedexpression'${binding.expression}'不是一个函数，但必须是`if(compName){warn+=`Foundincomponent'${compName}'`}console.warn(warn)}//定义变量letpressTimer=null//定义函数处理程序//创建超时（1s后运行函数）让开始=(e)=>{if(e.type==='click'&&e.button!==0){return;}if(pressTimer===null){pressTimer=setTimeout(()=>{//运行函数处理程序()},1000)}}//取消超时letcancel=(e)=>{//检查定时器是否有值if(pressTimer!==null){clearTimeout(pressTimer)pressTimer=null}}//运行Functionconsthandler=(e)=>{binding.value(e)}//添加事件监听器el.addEventListener("mousedown",start);el.addEventListener("touchstart",开始);//如果此事件发生，则取消超时el.addEventListener("click",cancel);el.addEventListener("鼠标移出",取消);el.addEventListener("touchend",取消);el.addEventListener("触摸取消",取消);}})现在引用我们的Vue组件：
