Vue js如何防止按钮连续点击两次
Vue js how to prevent button clicked on two times continuously
我有一个按钮,用户可以根据需要多次单击该按钮。但是当用户点击按钮时,他可能会不小心点击两次,在这种情况下,第二次点击应该被代码阻止。
如果我进一步解释。它们应该是两次点击之间的一个小延迟。
如何使用 vue js 实现此目的?
在 Vue 文档中 Event modifiers
我发现 .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 方法 ..
_.debounce(func, [wait=0], [options={}])
Creates a debounced function that delays invoking func
until after wait milliseconds have elapsed since the last time the debounced function was invoked.
这是一个简单的例子..
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 实现此目的?
在 Vue 文档中 Event modifiers
我发现 .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 方法 ..
_.debounce(func, [wait=0], [options={}])
Creates a debounced function that delays invoking
func
until after wait milliseconds have elapsed since the last time the debounced function was invoked.
这是一个简单的例子..
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 更改为所需的毫秒值。