vue上传文件时 文件很大需要加载一会儿才能导入成功在提示导入成功之前怎么搞个转圈的样子让用户等待不能进行其他操作?
在Vue中,可以使用第三方库来实现转圈加载效果。以下介绍两种常用的方式:
- 使用Element UI的loading组件:Element UI提供了一个Loading组件,可以方便地实现转圈加载效果。首先,在组件中引入Loading组件:
import { Loading } from 'element-ui';
然后,在需要显示加载效果的地方,使用Loading组件的全局方法:
// 显示加载效果
let loadingInstance = Loading.service();
// 隐藏加载效果
loadingInstance.close();
- 使用Vue的自定义指令:Vue中可以通过自定义指令来实现转圈加载效果。首先,在Vue实例中注册一个全局指令:
Vue.directive('loading', {
bind: function (el, binding) {
// 创建一个div元素,用于显示加载效果
const mask = document.createElement('div');
mask.className = 'loading-mask';
el.appendChild(mask);
// 创建一个i元素,用于显示转圈图标
const icon = document.createElement('i');
icon.className = 'loading-icon';
mask.appendChild(icon);
// 根据绑定的值来控制加载效果的显示和隐藏
if (binding.value) {
mask.style.display = 'block';
} else {
mask.style.display = 'none';
}
},
update: function (el, binding) {
// 根据绑定的值来控制加载效果的显示和隐藏
if (binding.value) {
el.querySelector('.loading-mask').style.display = 'block';
} else {
el.querySelector('.loading-mask').style.display = 'none';
}
}
});
然后,在需要显示加载效果的地方,使用v-loading指令:
<div v-loading="isLoading">
<!-- 内容 -->
</div>
在Vue实例中,设置isLoading为true来显示加载效果,设置为false来隐藏加载效果。
以上两种方式都可以实现转圈加载效果,具体选择哪种方式取决于你的项目需求和个人偏好。
原文地址: https://www.cveoy.top/t/topic/jcvb 著作权归作者所有。请勿转载和采集!