Question

我有一个按钮，如果需要，用户可以多次单击按钮。但是，当用户单击按钮时，他可能会不小心单击两次，在这种情况下，第二次单击应被代码阻止。

如果我进一步解释。两次点击之间应该有一个小的延迟。

如何使用vue js实现此目标？

在Vue文档Event modifiers中我发现<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

.stop

这能完成我想要的工作吗？

Answer 1

否，.stop修饰符不能解决您的问题。该修饰符的作用是防止事件传播（相当于计划JavaScript中的stopPropagation()）

您可以使用.once修饰符来防止在第一个事件之后发生任何其他事件。但是，如果您希望允许多次单击，但在两次单击之间有延迟，则可以执行以下操作：

<template>
    <button :disabled="disabled" @click="delay">Increase</button>
</template>

<script>
  export default {
    data () {
      return {
        disabled: false,
        timeout: null
      }
    },
    methods: {
      delay () {
        this.disabled = true

        // Re-enable after 5 seconds
        this.timeout = setTimeout(() => {
          this.disabled = false
        }, 5000)

        this.myFunction()
      },
      myFunction () {
        // Your function
      }
    },
    beforeDestroy () {
     // clear the timeout before the component is destroyed
     clearTimeout(this.timeout)
    }
  }
</script>

Answer 2

正如其他人所说，.stop修饰符只会阻止事件传播DOM。要获得所需的结果，可以研究Lodash的debounce方法..

_.debounce(func, [wait=0], [options={}])

创建一个去抖动功能，该功能将调用func延迟到上次调用该去抖动功能以来的等待毫秒数为止。

这是一个简单的例子..

new Vue({
  el: "#app",
  data: {
    counter: 0
  },
  methods: {
    myFunction() {
      this.counter++
    },
  },
  created() {
    this.debouncedMyFunction = debounce(this.myFunction, 300, {
      leading: true,
      trailing: false
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.4/vue.min.js"></script>
<script src="https://unpkg.com/lodash.debounce@4.0.8/index.js"></script>

<div id="app">
  <button @click.stop="debouncedMyFunction">Increase</button>
  <p>
    {{ counter }}
  </p>
</div>

将leading选项指定为true，将trailing选项指定为false，将导致该函数在超时的前缘而不是尾端被调用。您可以将超时值从300更改为所需的值（以毫秒为单位）。

Vue JS如何防止按钮连续两次被点击

2 个答案: