el-loading:
https://www.cnblogs.com/grt322/p/8564434.html
Element 提供了两种调用 Loading 的方法:指令和服务。对于自定义指令v-loading
,只需要绑定Boolean
即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body
修饰符,可以使遮罩插入至 DOM 中的 body 上。
自定义指令v-loading:
服务
Loading 还可以以服务的方式调用。引入 Loading 服务:
import { Loading } from 'element-ui';
在需要调用时:
Loading.service(options);
其中 options
参数为 Loading 的配置项,具体见下表。LoadingService
会返回一个 Loading 实例,可通过调用该实例的 close
方法来关闭它:
let loadingInstance = Loading.service(options);
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
需要注意的是,以服务的方式调用的全屏 Loading 是单例的:若在前一个全屏 Loading 关闭前再次调用全屏 Loading,并不会创建一个新的 Loading 实例,而是返回现有全屏 Loading 的实例:
项目使用:
1、 推荐
// 下载导入模板(只要安装了element即可) import { Loading } from 'element-ui';
downloadTemplate() {
let loadingInstance = this.$loading({
lock: true,
background: "rgba(0, 0, 0, 0.7)",
text: "正在准备数据,请不要刷新或关闭页面",
});
this.$http({
url: this.$http.adornUrl(
"/gatherComm/xxxx/downloadTemplate"
),
method: "post",
responseType: "arraybuffer",
data: this.$http.adornData({
yearMonth: this.dataForm.yearMonth,
cityId: this.dataForm.cityId,
}),
}).then((data) => {
this.$http.fileDownload(data);
loadingInstance.close();//关闭loading
});
},
import { Loading } from 'element-ui';
const loading = this.$loading({
lock: true, //同v-loading的修饰符
text: this.$t('加载中'), //加载文案
background: 'rgba(10,29,69,0.8)', //背景色
spinner: 'el-icon-loading', //加载图标
target: document.querySelector(".body") //loading需要覆盖的DOM节点,默认为body
})
代码执行后,关闭loading
loading.close();
使用步骤:
1、完整引入了 Element
import ElementUI from 'element-ui' // pc端组件
2、在向后台发起请求前调用this.loading(),在请求结束后调用this.loading(),在请求结束后调用this.loading(),在请求结束后调用this.loading().close()
this.$axios.get().then(
res=>{
doSomthing
this.loading.close()
this.loading = false;
})
.catch(error=>{
doSomthing
this.loading.close()
this.loading = false;
})
2、还需要先引入 Loading 麻烦!
import { Loading } from 'element-ui';
let loadingInstance = Loading.service({
fullscreen: true,
lock: true,
background: "rgba(0, 0, 0, 0.7)",
text: "正在准备数据,请不要刷新或关闭页面",
});
let loadingInstance1 = Loading.service({ fullscreen: true });
let loadingInstance2 = Loading.service({ fullscreen: true });
console.log(loadingInstance1 === loadingInstance2); // true
此时调用它们中任意一个的 close
方法都能关闭这个全屏 Loading。
如果完整引入了 Element,那么 Vue.prototype 上会有一个全局方法 $loading
,它的调用方式为:this.$loading(options)
,同样会返回一个 Loading 实例。
Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串;若传入字符串,则会将其作为参数传入 document.querySelector 以获取到对应 DOM 节点 | object/string | — | document.body |
body | 同 v-loading 指令中的 body 修饰符 | boolean | — | false |
fullscreen | 同 v-loading 指令中的 fullscreen 修饰符 | boolean | — | true |
lock | 同 v-loading 指令中的 lock 修饰符 | boolean | — | false |
text | 显示在加载图标下方的加载文案 | string | — | — |
spinner | 自定义加载图标类名 | string | — | — |
background | 遮罩背景色 | string | — | — |
customClass | Loading 的自定义类名 | string | — | — |
自定义
可自定义加载文案、图标和背景色。
在绑定了v-loading
指令的元素上添加element-loading-text
属性,其值会被渲染为加载文案,并显示在加载图标的下方。类似地,element-loading-spinner
和element-loading-background
属性分别用来设定图标类名和背景色值。
<el-table
v-loading="true"
:data="tableData"
style="width: 100%">
</template>
<el-table
v-loading="loading2"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData"
style="width: 100%">
整页加载
页面数据加载时显示。
当使用指令方式时,全屏遮罩需要添加fullscreen
修饰符(遮罩会插入至 body 上),此时若需要锁定屏幕的滚动,可以使用lock
修饰符;当使用服务方式时,遮罩默认即为全屏,无需额外设置。
<el-button
type="primary"
@click="openFullScreen"
v-loading.fullscreen.lock="fullscreenLoading">
指令方式
</el-button>
openFullScreen() {
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 2000);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
}
转自:加载动画插件spin.js的使用随笔 - Dreamsqin - 博客园
很坑啊spin.js 报错,需要找到spin.min.js才有用
点击这里下载 spin.min.js 404 Not Found
<!doctype html>
<html>
<head>
<title>Test Spin Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="spin.min.js" ></script>
<style>
#Div{
width: 100%;
height: 100%;
text-align:center;
}
#firstDiv{
width: 100%;
height: 50%;
}
#secondDiv{
width: 50%;
height: 50%;
margin:0 auto;
}
</style>
<script type="text/javascript">
//opts 样式可从网站在线制作
var opts = {
lines: 13, // 花瓣数目
length: 20, // 花瓣长度
width: 10, // 花瓣宽度
radius: 30, // 花瓣距中心半径
corners: 1, // 花瓣圆滑度 (0-1)
rotate: 0, // 花瓣旋转角度
direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
color: '#000', // 花瓣颜色
speed: 1, // 花瓣旋转速度
trail: 60, // 花瓣旋转时的拖影(百分比)
shadow: false, // 花瓣是否显示阴影
hwaccel: false, //spinner 是否启用硬件加速及高速旋转
className: 'spinner', // spinner css 样式名称
zIndex: 2e9, // spinner的z轴 (默认是2000000000)
top: '25%', // spinner 相对父容器Top定位 单位 px
left: '50%'// spinner 相对父容器Left定位 单位 px
};
var spinner = new Spinner(opts);
$(document).ready(function () {
$("#btnRequest").bind("click", function () {
Request();
});
$("#btnRequest2").bind("click", function () {
Request2();
});
})
function Request(){
//请求时spinner出现
var target = $("#firstDiv").get(0);
spinner.spin(target);
}
function Request2(){
//关闭spinner
spinner.spin();
}
</script>
</head>
<body>
<div id="Div">
<div id="firstDiv">
</div>
<div id="secondDiv">
<input id="btnRequest" type="button" value="显示加载" class="btnStyle" />
<input id="btnRequest2" type="button" value="隐藏加载" class="btnStyle" />
</div>
</div>
</body>
</html>
提示:
Spin.js 的在线设计、演示及下载地址为:spin.js
我们可以在链接页面中,动态设置样式同时会自动生成样式的配置脚本:
var opts = {
lines: 13, // 花瓣数目
length: 20, // 花瓣长度
width: 10, // 花瓣宽度
radius: 30, // 花瓣距中心半径
corners: 1, // 花瓣圆滑度 (0-1)
rotate: 0, // 花瓣旋转角度
direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
color: '#000', // 花瓣颜色
speed: 1, // 花瓣旋转速度
trail: 60, // 花瓣旋转时的拖影(百分比)
shadow: false, // 花瓣是否显示阴影
hwaccel: false, //spinner 是否启用硬件加速及高速旋转
className: 'spinner', // spinner css 样式名称
zIndex: 2e9, // spinner的z轴 (默认是2000000000)
top: '25%', // spinner 相对父容器Top定位 单位 px
left: '50%'// spinner 相对父容器Left定位 单位 px
};
二、spin.js+自制遮罩(暂时还没有找到插件本身自带的遮罩层)
背景:想要在显示加载状态时,父层为不可编辑状态
在页面最后、</body>之前添加div遮罩层
<div id="mb"></div>
设置遮罩层的样式
#mb{
display: none;
height: 100%;
width: 100%;
position: fixed;
*position: absolute;
*height: 1380px;
background: black;
top:0;
left: 0;
opacity:0.6;
}
最后通过js控制遮罩的显示与隐藏
//显示
$("#mb").css("display","block");
var target = $(".firstDiv").get(0);
spinner.spin(target);
//隐藏
$("#mb").css("display","none");
spinner.spin();
效果如下,此时父层为不可编辑状态: