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