阳谷网站建设电话,网站查询域名ip,数据采集发布 wordpress,佛山大良网站建设求人不如求己 你不知道的loading使用方式1. 指令方式使用1.1 默认loading1.2 自定义loading1.3 整页加载2. 服务方式使用2.1 this.$loading的使用2.2 Loading.service的使用关于页面交互#xff0c;最害怕的就是接口等待时间太长#xff0c;用户体验不好。
而如何提高用户体… 求人不如求己 你不知道的loading使用方式1. 指令方式使用1.1 默认loading1.2 自定义loading1.3 整页加载2. 服务方式使用2.1 this.$loading的使用2.2 Loading.service的使用关于页面交互最害怕的就是接口等待时间太长用户体验不好。
而如何提高用户体验呢接口返回速度这个是后端同学去优化前端同学也可通过加载loading来优化体验
Element 提供了两种调用 Loading 的方法指令和服务
详情可查看官网 : Element Loading 加载
1. 指令方式使用
1.1 默认loading 对于自定义指令v-loading只需要绑定Boolean即可。默认状况下Loading 遮罩会插入到绑定元素的子节点通过添加body修饰符可以使遮罩插入至 DOM 中的 body 上。 使用方式如下
templatediv v-loadingloading指定loading插入区域/div
/template
script
export default {name: loading,data() {return {loading: false};},mounted() {this.loading true;setTimeout(() {this.loading false;}, 2 * 1000);}
};
/script
style langscss scoped
/style1.2 自定义loading 在绑定了v-loading指令的元素上添加element-loading-text属性其值会被渲染为加载文案并显示在加载图标的下方。类似地element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值。 使用方式如下
templatedivv-loadingloadingelement-loading-text拼命加载中element-loading-spinnerel-icon-loadingelement-loading-backgroundrgba(0, 0, 0, 0.8)指定loading插入区域/div
/template
script
export default {name: loading,data() {return {loading: false};},mounted() {this.loading true;setTimeout(() {this.loading false;}, 2 * 1000);}
};
/script
style langscss scoped
/style1.3 整页加载 当使用指令方式时全屏遮罩需要添加fullscreen修饰符遮罩会插入至 body上此时若需要锁定屏幕的滚动可以使用lock修饰符当使用服务方式时遮罩默认即为全屏无需额外设置。 使用方式如下
templatediv v-loading.fullscreen.lockloading整页加载loading/div
/template
script
export default {name: loading,data() {return {loading: false};},mounted() {this.loading true;setTimeout(() {this.loading false;}, 2 * 1000);}
};
/script
style langscss scoped
/style2. 服务方式使用 如果完整引入了 Element那么 Vue.prototype 上会有一个全局方法 $loading它的调用方式为this.$loading(options)同样会返回一个 Loading 实例。 以服务的方式调用的 Loading 需要异步关闭 2.1 this.$loading的使用
templatediv idloading_domel-button typeprimary clickopenLoading服务方式开启loading/el-button/div
/template
script
export default {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
style langscss scoped
/style2.2 Loading.service的使用
templatedivel-button typeprimary clickopenLoading开启loading/el-button/div
/template
script
import { Loading } from element-ui;
export default {name: loading,data() {return {};},methods: {openLoading() {let loadingInstance Loading.service(options);this.$nextTick(() {// 以服务的方式调用的 Loading 需要异步关闭loadingInstance.close();});}}
};
/script
style langscss scoped
/style
