55

src/main.js

@@ -27,6 +27,10 @@ Vue.use(Print);
 Vue.component('tinymce', TinymceEditor);
 import '@/icons';
 
+import clickOnce from './utils/clickOnce.js';
+// 注册全局自定义指令
+Vue.directive('click-once', clickOnce);
+
 // bpmnProcessDesigner 需要引入
 import MyPD from '@/components/bpmnProcessDesigner/package/index.js';
 Vue.use(MyPD);

src/utils/clickOnce.js

@@ -0,0 +1,35 @@
+export default {
+  bind(el, binding, vnode) {
+    // 创建加载指示器元素
+    const loadingIndicator = document.createElement('i');
+    loadingIndicator.classList.add('loading-indicator', 'el-icon-loading'); // 假设使用 Element UI 的加载图标
+    el.appendChild(loadingIndicator);
+
+    // 隐藏加载指示器，默认不显示
+    loadingIndicator.style.display = 'none';
+
+    // 保存加载指示器引用
+    el._loadingIndicator = loadingIndicator;
+
+    // 添加点击事件监听器
+    el.addEventListener('click', () => {
+      // 显示加载指示器
+      loadingIndicator.style.display = 'inline-block';
+
+      // 禁用按钮
+      el.setAttribute('disabled', '');
+
+      // 假设这里有一个异步操作，完成后需要隐藏加载指示器和重新启用按钮
+      setTimeout(() => {
+        loadingIndicator.style.display = 'none';
+        el.removeAttribute('disabled'); // 重新启用按钮
+      }, 2000); // 模拟异步操作耗时2秒
+    });
+
+    // 清理事件监听器，防止内存泄漏
+    vnode.context.$once('hook:beforeDestroy', () => {
+      el.removeEventListener('click', () => {});
+      el.removeChild(loadingIndicator);
+    });
+  }
+};