Vue 防止用户短时间内频繁多次点击
功能描述:禁止用户在一定的时间多次点击,在一定时间内将按钮禁用,用定时器实现,一定时间之后用户可再次点击.功能实现:使用Vue.directive实现,全局注册,方便其他主键调用Vue 功能实现:在mian.js 添加如下代码:// Vue 定义自定义指令:防止按钮重复提交Vue.directive('preventReClick', {inserted (el, binding) {el.add
·
功能描述:禁止用户在一定的时间多次点击,在一定时间内将按钮禁用,用定时器实现,一定时间之后用户可再次点击.
功能实现:使用Vue.directive实现,全局注册,方便其他主键调用
Vue 功能实现:
在mian.js 添加如下代码:
// Vue 定义自定义指令:防止按钮重复提交
Vue.directive('preventReClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
},binding.value || 1000)
}
})
}
})
在触发点击事件的按钮上直接用指令即可
效果说明:五秒之后 t添加按钮的事件才可再次触发。
相关知识点补充
Vue.directive 对象涉及的钩子函数(均为可选)
- bind
只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 - inserted
被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 - update
所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。 - componentUpdated
指令所在组件的 VNode 及其子 VNode 全部更新后调用。 - unbind
只调用一次,指令与元素解绑时调用。
更多推荐
已为社区贡献24条内容
所有评论(0)