vue3参考:点击这里跳转
1、新建 preventReClick.js
import Vue from 'vue'
// 防止重复提交指令
const preventReClick = Vue.directive('preventReClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
}
})
}
})
export { preventReClick }
2、main.js中使用
import { preventReClick } from './assets/js/preventReClick'
3、按钮上添加 v-prevent-re-click
<el-button size="small" type="primary" @click="submit" v-prevent-re-click>确 定</el-button>

本文档介绍了如何在 Vue3 中创建并使用一个防止重复点击的自定义指令,以避免短时间内多次提交表单。通过在按钮上添加 `v-prevent-re-click` 指令,可以禁用按钮并在指定延迟后恢复,确保操作的唯一性。
684

被折叠的 条评论
为什么被折叠?



