求人不如求己
你不知道的loading使用方式
关于页面交互,最害怕的就是接口等待时间太长,用户体验不好。
而如何提高用户体验呢?
接口返回速度
这个是后端同学去优化,前端同学也可通过
加载loading
来优化体验
Element 提供了两种调用 Loading 的方法:指令和服务
详情可查看官网 : Element Loading 加载
1. 指令方式使用
1.1 默认loading
对于自定义指令v-loading,只需要绑定Boolean即可。默认状况下,
Loading 遮罩会插入到绑定元素的子节点
,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上。
使用方式如下:
<template><divv-loading="loading">
指定loading插入区域
</div></template><script>exportdefault{name:"loading",data(){return{loading:false};},mounted(){this.loading =true;setTimeout(()=>{this.loading =false;},2*1000);}};</script><stylelang='scss'scoped></style>
1.2 自定义loading
在绑定了v-loading指令的元素上添加
element-loading-text
属性,其值会被渲染为
加载文案
,并显示在加载图标的下方。类似地,
element-loading-spinner
和
element-loading-background
属性分别用来设定
图标类名
和
背景色值
。
使用方式如下:
<template><divv-loading="loading"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)">
指定loading插入区域
</div></template><script>exportdefault{name:"loading",data(){return{loading:false};},mounted(){this.loading =true;setTimeout(()=>{this.loading =false;},2*1000);}};</script><stylelang='scss'scoped></style>
1.3 整页加载
当使用指令方式时,
全屏遮罩需要添加fullscreen修饰符
(遮罩会
插入至 body
上),此时若需要
锁定屏幕的滚动
,可以使用
lock修饰符
;当使用服务方式时,遮罩默认即为全屏,无需额外设置。
使用方式如下:
<template><divv-loading.fullscreen.lock="loading">
整页加载loading
</div></template><script>exportdefault{name:"loading",data(){return{loading:false};},mounted(){this.loading =true;setTimeout(()=>{this.loading =false;},2*1000);}};</script><stylelang='scss'scoped></style>
2. 服务方式使用
如果完整引入了 Element,那么 Vue.prototype 上会有一个
全局方法 $loading
,它的调用方式为:this.$loading(options),同样会返回一个 Loading 实例。
以服务的方式调用的 Loading 需要异步关闭
2.1 this.$loading的使用
<template><divid="loading_dom"><el-buttontype="primary"@click="openLoading">服务方式开启loading</el-button></div></template><script>exportdefault{name:"loading",data(){return{};},methods:{openLoading(){// 开启loadingconst loadingInstance =this.$loading({lock:true,//lock的修改符--默认是falsetext:"Loading",//显示在加载图标下方的加载文案spinner:"el-icon-loading",//自定义加载图标类名background:"rgba(0, 0, 0, 0.1)",//遮罩层颜色target: document.querySelector("#loading_dom")//loading覆盖的dom元素节点 默认插入body标签});// 关闭loading时机setTimeout(()=>{
loadingInstance.close();},2*1000);}}};</script><stylelang='scss'scoped></style>
2.2 Loading.service的使用
<template><div><el-buttontype="primary"@click="openLoading">开启loading</el-button></div></template><script>import{ Loading }from"element-ui";exportdefault{name:"loading",data(){return{};},methods:{openLoading(){let loadingInstance = Loading.service(options);this.$nextTick(()=>{// 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();});}}};</script><stylelang='scss'scoped></style>
版权归原作者 Dark_programmer 所有, 如有侵权,请联系我们删除。