|
|
@@ -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);
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|