封装防止重复点击的js

src/assets/styles/index.css

@@ -97,4 +97,16 @@ div:focus {outline: none;}
 .mapaddress .listBox{padding:5px 12px;overflow-y: auto;height: 240px;}
 .zpover1sb{width: 97%;}
 .zpover1sb .el-table .el-table__cell{padding:8px 0;}
-.hid{overflow: hidden}
+.hid{overflow: hidden}
+/* 防重复点击禁用样式 */
+.prevent-reclick-disabled {
+  cursor: not-allowed !important;
+  opacity: 0.7 !important;
+  pointer-events: none !important; /* 彻底禁止鼠标事件，兼容非按钮元素 */
+}
+/* 针对按钮的额外样式 */
+button.prevent-reclick-disabled {
+  background-color: #e6e6e6 !important;
+  border-color: #d9d9d9 !important;
+  color: #999 !important;
+}

src/main.js

@@ -43,7 +43,10 @@ import 'element-ui/lib/theme-chalk/dialog.css';
 import directive from './directive'; // directive
 // import wx from 'weixin-js-sdk';
 // jenkins 测试打包前先合并
-
+// 引入防重复点击指令
+import preventReClick from './utils/preventReClick'
+// 注册指令（通过Vue.use方式，符合Vue插件规范）
+Vue.use(preventReClick)
 Vue.use(ElTable);
 Vue.use(ElTableColumn);
 Vue.use(ElPopover);

src/utils/preventReClick.js

@@ -0,0 +1,63 @@
+// src/directives/preventReClick.js
+
+/**
+ * 防重复点击指令
+ * 使用方式：v-preventReClick 或 v-preventReClick="延迟时间(毫秒)"
+ * 示例：v-preventReClick="1500" 表示1.5秒内禁止重复点击
+ */
+export default {
+  install(Vue) {
+    // 注册全局自定义指令
+    Vue.directive('preventReClick', {
+      bind(el, binding) {
+        // 存储原始点击事件（兼容@click绑定的方法）
+        el.__originClick__ = el.onclick
+        
+        // 自定义延迟时间，默认1000ms
+        const delay = binding.value || 1000
+        
+        // 重写点击事件
+        el.onclick = function(...args) {
+          // 已锁定则直接返回
+          if (el.__isLocked__) return
+          
+          // 1. 锁定状态：标记为已点击
+          el.__isLocked__ = true
+          
+          // 2. 禁用按钮（针对button/input等可禁用元素）
+          if (el.tagName === 'BUTTON' || el.type === 'button') {
+            el.disabled = true
+          }
+          
+          // 3. 添加禁用样式类（方便自定义样式）
+          el.classList.add('prevent-reclick-disabled')
+          
+          // 4. 执行原始点击事件
+          if (typeof el.__originClick__ === 'function') {
+            el.__originClick__.apply(this, args)
+          }
+          
+          // 5. 延迟解锁
+          setTimeout(() => {
+            el.__isLocked__ = false
+            if (el.tagName === 'BUTTON' || el.type === 'button') {
+              el.disabled = false
+            }
+            el.classList.remove('prevent-reclick-disabled')
+          }, delay)
+        }
+      },
+      // 指令更新时重新绑定（比如延迟时间动态变化）
+      update(el, binding) {
+        el.__delay__ = binding.value || 1000
+      },
+      // 指令解绑时清理，避免内存泄漏
+      unbind(el) {
+        el.onclick = el.__originClick__
+        delete el.__originClick__
+        delete el.__isLocked__
+        delete el.__delay__
+      }
+    })
+  }
+}