求人不如求己

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

而如何提高用戶體驗(yàn)?zāi)兀?code>接口返回速度這個(gè)是后端同學(xué)去優(yōu)化，前端同學(xué)也可通過(guò)加載loading來(lái)優(yōu)化體驗(yàn)

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

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

1. 指令方式使用

1.1 默認(rèn)loading

對(duì)于自定義指令v-loading，只需要綁定Boolean即可。默認(rèn)狀況下，Loading 遮罩會(huì)插入到綁定元素的子節(jié)點(diǎn)，通過(guò)添加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屬性，其值會(huì)被渲染為加載文案，并顯示在加載圖標(biāo)的下方。類似地，element-loading-spinner和element-loading-background屬性分別用來(lái)設(shè)定圖標(biāo)類名和背景色值。

使用方式如下：

<template>
  <div
    v-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 整頁(yè)加載

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

使用方式如下：

<template>
  <div v-loading.fullscreen.lock="loading">
    整頁(yè)加載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 上會(huì)有一個(gè)全局方法 $loading，它的調(diào)用方式為：this.$loading(options)，同樣會(huì)返回一個(gè) Loading 實(shí)例。

以服務(wù)的方式調(diào)用的 Loading 需要異步關(guān)閉文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-781826.html

2.1 this.$loading的使用

<template>
  <div id="loading_dom">
    <el-button type="primary" @click="openLoading">服務(wù)方式開(kāi)啟loading</el-button>
  </div>
</template>
<script>
export default {
  name: "loading",
  data() {
    return {};
  },
  methods: {
    openLoading() {
      // 開(kāi)啟loading
      const loadingInstance = this.$loading({
        lock: true, //lock的修改符--默認(rèn)是false
        text: "Loading", //顯示在加載圖標(biāo)下方的加載文案
        spinner: "el-icon-loading", //自定義加載圖標(biāo)類名
        background: "rgba(0, 0, 0, 0.1)", //遮罩層顏色
        target: document.querySelector("#loading_dom") //loading覆蓋的dom元素節(jié)點(diǎn) 默認(rèn)插入body標(biāo)簽
      });

      // 關(guān)閉loading時(shí)機(jī)
      setTimeout(() => {
        loadingInstance.close();
      }, 2 * 1000);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>

2.2 Loading.service的使用

<template>
  <div>
    <el-button type="primary" @click="openLoading">開(kāi)啟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>

到了這里，關(guān)于element - - - - - 你不知道的loading使用方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！