第25天，感覺很快就要結束了呢～

輕鬆放上載入進條 Loading Bar

今天雖然有兩個題目，不過一個是元件一個是插件，在功能上大致上都一樣，兩個都會在有get post等等自動觸發效果

就讓我們來看看吧

Ajax Bar

Ajax Bar

這個是元件的方式，所以需要手動部署，不過可以做的操作也會多一點點

引入

framework: {
  components: ['QAjaxBar']
}

基本使用

由於在每一個頁面都會用到

記得放在最上層App.vue

<template>
  <div id="q-app">
    <router-view></router-view>
    <q-ajax-bar/>
  </div>
</template>

屬性

• position 設定元件位置
• size 載入條的寬度,預設4px
• color 顏色不解釋,預設red
• reverse 使進度方向相反 左至右 變成 右至左
• skip-hijack 應該是避免被拿到什麼地方？（不太清楚，如果有用過的大大麻煩補充 感恩)

事件

• @start 作動時觸發
• @stop 結束作動時觸發

方法

雖然自動會觸發，但是也是可以手動來觸發/關閉他

• start()
• stop()

Loading Bar

LoadingBar

引入

注意這邊是plugins哦

在0.17版本以後的可以在config裡面自訂屬性

屬性跟上面的AjaxBar一樣

framework: {
  plugins: ['LoadingBar'],

  config: {
    // optional (v0.17+)
    loadingBar: {
      // QAjaxBar properties
    }
  }
}

基本操作

一樣也是會自己作動，但如果要手動觸發

可以這樣做

this.$q.loadingBar.start()
this.$q.loadingBar.stop()
this.$q.loadingBar.increment(value)