位置: IT常识 - 正文
element - - - - - 你不知道的loading使用方式
编辑：rootadmin推荐整理分享element - - - - - 你不知道的loading使用方式，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
求人不如求己
你不知道的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 上。
使用方式如下：
<template> <div v-loading="loading"> 指定loading插入区域 </div></template><script>export default { name: "loading", data() { return { loading: false }; }, mounted() { this.loading = true; setTimeout(() => { this.loading = false; }, 2 * 1000); }};</script><style lang='scss' scoped></style>1.2 自定义loading在绑定了v-loading指令的元素上添加element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值。
使用方式如下：
<template> <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(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 lang='scss' scoped></style>1.3 整页加载当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body上），此时若需要锁定屏幕的滚动，可以使用lock修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。
使用方式如下：
<template> <div v-loading.fullscreen.lock="loading"> 整页加载loading </div></template><script>export default { name: "loading", data() { return { loading: false }; }, mounted() { this.loading = true; setTimeout(() => { this.loading = false; }, 2 * 1000); }};</script><style lang='scss' scoped></style>2. 服务方式使用如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 $loading，它的调用方式为：this.$loading(options)，同样会返回一个 Loading 实例。
以服务的方式调用的 Loading 需要异步关闭
2.1 this.$loading的使用<template> <div id="loading_dom"> <el-button type="primary" @click="openLoading">服务方式开启loading</el-button> </div></template><script>export default { name: "loading", data() { return {}; }, methods: { openLoading() { // 开启loading const loadingInstance = this.$loading({ lock: true, //lock的修改符--默认是false text: "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 lang='scss' scoped></style>2.2 Loading.service的使用<template> <div> <el-button type="primary" @click="openLoading">开启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 lang='scss' scoped></style>下一篇：【uni-app】swiper的使用(uni-swiper-dot)
