求人不如求己

關(guān)于頁面交互，最害怕的就是接口等待時間太長，用戶體驗不好。

而如何提高用戶體驗?zāi)?#xff1f;接口返回速度這個是后端同學(xué)去優(yōu)化，前端同學(xué)也可通過加載loading來優(yōu)化體驗

Element 提供了兩種調(diào)用 Loading 的方法：指令和服務(wù)

詳情可查看官網(wǎng) : Element Loading 加載

1. 指令方式使用

1.1 默認(rèn)loading

對于自定義指令v-loading，只需要綁定Boolean即可。默認(rèn)狀況下，Loading 遮罩會插入到綁定元素的子節(jié)點，通過添加body修飾符，可以使遮罩插入至 DOM 中的 body 上。

使用方式如下：

<template><div v-loading="loading">指定loading插入?yún)^(qū)域</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屬性，其值會被渲染為加載文案，并顯示在加載圖標(biāo)的下方。類似地，element-loading-spinner和element-loading-background屬性分別用來設(shè)定圖標(biāo)類名和背景色值。

使用方式如下：

<template><divv-loading="loading"element-loading-text="拼命加載中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)">指定loading插入?yún)^(qū)域</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 整頁加載

當(dāng)使用指令方式時，全屏遮罩需要添加fullscreen修飾符（遮罩會插入至 body上），此時若需要鎖定屏幕的滾動，可以使用lock修飾符；當(dāng)使用服務(wù)方式時，遮罩默認(rèn)即為全屏，無需額外設(shè)置。

使用方式如下：

<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. 服務(wù)方式使用

如果完整引入了 Element，那么 Vue.prototype 上會有一個全局方法 $loading，它的調(diào)用方式為：this.$loading(options)，同樣會返回一個 Loading 實例。

以服務(wù)的方式調(diào)用的 Loading 需要異步關(guān)閉

2.1 this.$loading的使用

<template><div id="loading_dom"><el-button type="primary" @click="openLoading">服務(wù)方式開啟loading</el-button></div>
</template>
<script>
export default {name: "loading",data() {return {};},methods: {openLoading() {// 開啟loadingconst loadingInstance = this.$loading({lock: true, //lock的修改符--默認(rèn)是falsetext: "Loading", //顯示在加載圖標(biāo)下方的加載文案spinner: "el-icon-loading", //自定義加載圖標(biāo)類名background: "rgba(0, 0, 0, 0.1)", //遮罩層顏色target: document.querySelector("#loading_dom") //loading覆蓋的dom元素節(jié)點 默認(rèn)插入body標(biāo)簽});// 關(guān)閉loading時機(jī)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(() => {// 以服務(wù)的方式調(diào)用的 Loading 需要異步關(guān)閉loadingInstance.close();});}}
};
</script>
<style lang='scss' scoped>
</style>