vue实现button按钮的重复点击指令方式

2024-11-2 22:43| 发布者: ae2942d9| 查看: 74| 评论: 0

摘要: 目次vue实现button按钮的重复点击指令vue提交表单重复点击，重复提交防抖标题办理方案总结vue实现button按钮的重复点击指令 [code]// 注册一个全局自界说指令 `v-debounce` Vue.directive('debounce', { // 当被绑

vue实现button按钮的重复点击指令

[code]// 注册一个全局自界说指令 `v-debounce` Vue.directive('debounce', { // 当被绑定的元素插入到 DOM 中时... inserted: function (el, binding) { let timer; el.addEventListener('click', () => { clearTimeout(timer); timer = setTimeout(() => { binding.value(); // 调用传给指令的方法 }, 500); }); }, // 当绑定元素的父组件更新时... update: function (el, binding) { let timer; el.addEventListener('click', () => { clearTimeout(timer); timer = setTimeout(() => { binding.value(); // 调用传给指令的方法 }, 500); }); } }); // 使用指令 // 在组件中 <template> <button v-debounce="myClickHandler">Click me</button> </template> <script> export default { methods: { myClickHandler() { // 处置惩罚点击变乱 } } } </script> [/code]

vue提交表单重复点击，重复提交防抖标题

标题：用户点击生存时，大概会多次点击。导致天生重复数据。

目标：多次点击时，1s内只答应提交一次数据。

办理方案

1.在utils文件夹创建文件preventReClick.js

[code]export default { install (Vue) { // 防止按钮重复点击 Vue.directive('preventReClick', { inserted (el, binding) { // console.log("binding-7", binding) el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled = false }, binding.value || 2000) } }) } }) } }[/code]

2.在main.js中引入