Vue中級指南-05 Vue中路由跳的轉進度條和數據加載Loading顯示

咱們在Vue項目中路由跳轉時但願出現一個進度條來顯示當前跳轉狀態,或者在數據發起請求時有個loading提示框來提示當前正在加載數據,本篇文章簡單介紹一下我在項目中的使用方法。

路由跳轉進度條

NProgress是頁面跳轉時出如今瀏覽器頂部的進度條

• 官網：ricostacruz.com/nprogress/

• github：github.com/rstacruz/np…

• NProgress 安裝

npm install --save nprogress
複製代碼

• NProgress 使用

// 若是在main.js引入並掛載在Vue實例上,請最在頂部引入,不然會出現問題。
// NProgress最重要兩個API就是start()和done()，基本通常用這兩個就足夠了。
// router.js頁面
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
  NProgress.start() // 顯示進度條
  next()
})

router.afterEach(() => {
  NProgress.done() // 完成進度條
})
複製代碼

• NProgress 高級用法

// (1)百分比：經過設置progress的百分比，調用 .set(n)來控制進度，其中n的取值範圍爲0-1。
NProgress.set(0.0)   
NProgress.set(0.4)
NProgress.set(1.0)

// (2)遞增：要讓進度條增長，只要調用.inc()。這會產生一個隨機增量，但不會讓進度條達到100%。
// 此函數適用於圖片加載或其餘相似的文件加載。
NProgress.inc()

// (3)強制完成：經過傳遞 true 參數給done()，使進度條滿格，即便它沒有被顯示
NProgress.done(true)
複製代碼

• NProgress 其餘配置

// (1)minimum：設置最低百分比
NProgress.configure({minimum:0.1})

// (2)template：改變進度條的HTML結構。爲保證進度條能正常工做，須要元素擁有role=’bar’屬性。
NProgress.configure({
    template:"<div class='....'>...</div>"
})

// (3)ease：調整動畫設置，ease可傳遞CSS3緩衝動畫字符串例如:
// (ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier)
// speed爲動畫速度（單位ms）
複製代碼

以上內容就是NProgress的用法了,是否是很是簡單,你們動手實踐一下很容易就明白了。

數據請求loading提示(Element-ui爲例)

Element 提供了兩種調用 Loading 的方法：指令和服務。對於自定義指令v-loading，只須要綁定Boolean便可。默認情況下，Loading 遮罩會插入到綁定元素的子節點，經過添加body修飾符，可使遮罩插入至 DOM 中的 body 上。

• 自定義指令v-loading

// 一般展現表格數據的時候,會添加一個loading提示,當數據徹底請求回來時關閉loading提示
<template>
  <div class="app-container">
    <!-- 當前元素添加loading提示 -->
    <el-tabs type="border-card" v-model="activeKey" v-loading="loading">
      <el-tab-pane
        v-for="item of tabsLisgt"
        :key="item.key"
        :label="item.label"
        :name="item.name"
        :value="item.key"
      >
      <!-- 自定義的組件 -->
        <TabPane :tabsContent="filterstabsContent" :activeKey="activeKey" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import filtersDate from "@/utils/filtersTime";
import TabPane from "./components/TabPane";
export default {
  components: {
    TabPane
  },
  data() {
    return {
      // tabs標籤列表
      tabsLisgt: [
        { label: "所有", key: "0" },
        { label: "一級權限", key: "1" },
        { label: "二級權限", key: "2" },
        { label: "三級權限", key: "3" }
      ],
      //   tabs標籤頁面內容
      tabsContent: [],
      activeKey: "1",
      loading: true
    };
  },
  computed: {
    // 根據tabs頁面狀態展現對應數據
    filterstabsContent() {
      if (this.activeKey === "0") {
        return this.tabsContent;
      } else {
        return this.tabsContent.filter(item => {
          return item.status === parseInt(this.activeKey);
        });
      }
    }
  },
  methods: {
    // 獲取tabs頁面展現內容
    async getTabsContent() {
      let result = await this.$getService("TabsService").getTabs();
      if (result && result.length > 0) {
        for (let i in result) {
          // 轉換時間格式
          result[i].createTime = filtersDate(result[i].createTime);
        }
        this.tabsContent = result;
      }
      // 關閉loading顯示
      this.loading = false;
    }
  },
  async mounted() {
    // 獲取tabs頁面展現內容
    await this.getTabsContent();
  }
};
</script>
複製代碼

• 服務方式

// Loading 還能夠以服務的方式調用。引入 Loading 服務
import { Loading } from 'element-ui';

// 在須要調用時：
Loading.service(options);

// 其中 options 參數爲 Loading 的配置項，具體見下。
// LoadingService 會返回一個 Loading 實例,可經過調用該實例的 close 方法來關閉它：
let loadingInstance = Loading.service({ fullscreen: true });
this.$nextTick(() => { // 以服務的方式調用的 Loading 須要異步關閉
  loadingInstance.close();
})
複製代碼

在個人項目中,我是經過如下方式來實現的

// 封裝axios
import axios from 'axios'
import {API_BASE_URL} from '../config'
import store from '../store'
import {Loading} from 'element-ui'

var apiClient = axios.create({
  baseURL: API_BASE_URL
})
apiClient.defaults.withCredentials = true
// 封裝請求
apiClient.interceptors.request.use(function (config) {
  // 開啓loading提示
  let loadingInstance = Loading.service({ fullscreen: true })
  // 經過vuex來發起一個異步事件,保存當前開啓狀態和loading實例
  store.dispatch('loading', {loadingStatus: true, loadingInstance: loadingInstance})
  return config
}, function (error) {
  // 關閉loading提示
  store.dispatch('loading', {loadingStatus: false})
  return Promise.reject(error)
})
apiClient.interceptors.response.use(function (response) {
  // 關閉loading提示
  store.dispatch('loading', {loadingStatus: false})
  return response.data.data
}, function (error) {
  // 關閉loading提示
  store.dispatch('loading', {loadingStatus: false})
  return Promise.reject(error)
})

export { apiClient }

// actions.js
loading: function ({ commit }, data) {
  commit(types.LOADING, data)
}

// mutaions.js
[types.LOADING]: function (state, data) {
state.loadingStatus = data.loadingStatus
  if (!data.loadingStatus) {
    state.loadingInstance.close()
  } else {
    state.loadingInstance = data.loadingInstance
  }
}
複製代碼

以上就是經過Element-ui提供的兩種loading顯示案例,你們能夠手動實踐一下,方便理解