버튼이 두 번 연속 클릭되지 않도록 하는 방법

버튼이 두 번 연속 클릭되지 않도록 하는 방법

이 질문에는 이미 답변이 있습니다.

Vue2에서 데바운스를 구현하는 방법 (15개의 답변)

닫힘3년 전.

나는 버튼이 있고, 사용자가 원한다면 버튼을 여러 번 클릭할 수 있다.그러나 사용자가 버튼을 클릭할 때 실수로 두 번 클릭할 수 있으며, 이 경우 두 번째 클릭은 코드에 의해 차단됩니다.

더 설명하자면.두 번의 클릭 사이에 약간의 지연이 있을 것입니다.

vue j를 사용하여 이 작업을 수행하려면 어떻게 해야 합니까?

Vue docs에서 찾은 이벤트 한정자.stop

<button @click.stop="myFunction">Increase</button>

이것으로 내가 원하는 일을 할 수 있을까?

그가 아니다..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>

남들이 말하듯이.stop수식자는 이벤트가 DOM 위로 전파되는 것만 중지합니다.원하는 결과를 얻으려면 Lodash의 데바운스 방법을 검토하십시오.

_.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>

의 지정leadingtrue 옵션 및trailingfalse를 지정하면 타임아웃의 후행 엔드가 아닌 선두 에지에서 함수가 호출됩니다.타임아웃 값은 300에서 원하는 값으로 밀리초 단위로 변경할 수 있습니다.

언급URL : https://stackoverflow.com/questions/54662327/vue-js-how-to-prevent-button-clicked-on-two-times-continuously