iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
1
Modern Web

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列 第 25

[Day 25] Vue Quasar 進度條 1 - Ajax Bar & Loading Bar

第25天,感覺很快就要結束了呢~

輕鬆放上載入進條 Loading Bar

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

就讓我們來看看吧

https://ithelp.ithome.com.tw/upload/images/20181108/20111805V3pAhizlQl.png

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)

上一篇
[Day 24] Vue Quasar 彈跳視窗 4 - Notify
下一篇
[Day 26] Vue Quasar 進度條 2 - Inner Loading (內容讀取)
系列文
[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言