iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0
Modern Web

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

[Day 26] Vue Quasar 進度條 2 - Inner Loading (內容讀取)

區塊內的讀取 Inner Loading

Inner Loading

有些時候會重新載入一些區塊,像是複雜的表格等等,這時候就可以用這個元件讓他看起來是在讀取啦~

https://ithelp.ithome.com.tw/upload/images/20181110/20111805sOkvoMydwc.png

引入

framework: {
  components: [
  'QInnerLoading',

  //如果有要改其他圖示動畫的話要再引入
  'QSpinnerGears'
  ]
}

其他的Spinner可以看這邊旁邊的demo

注意事項

使用InnerLoading時會運作在relative-position這個Class底下,如果沒加這個會變成整頁的哦

基本操作

這邊分兩個一頁跟一個元件

https://ithelp.ithome.com.tw/upload/images/20181110/20111805T6JkmRfXmn.png

index.vue

<template>
  <q-page class="q-ma-lg">
    
    <q-btn @click="$refs.myField.show()">Open</q-btn>
    <my-field class="relative-position" ref="myField"/>

  </q-page>
</template>

<script>
import MyField from './MyField.vue'
export default {
  components: {
    MyField
  }
}
</script>

MyField

<template>
  <q-field
    label="跨年去哪玩?"
    orientation="vertical"
  >
    <q-radio v-model="model" label="去日本" val="japan" checked-icon="far fa-check-circle" keep-color/>
    <q-radio v-model="model" label="去韓國" val="korea" keep-color color="green"/>
    <q-radio v-model="model" label="在家就好" val="home" keep-color color="red"/>
    
    <!-- 要放在元件的最後面 -->
    <q-inner-loading :visible="visible">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
    </q-inner-loading>
  </q-field>
</template>

<script>
export default {
  data () {
    return {
      model: false,
      visible: false,
    }
  },
  methods:{
    show() {
      this.visible = true
      setTimeout (()=> {
        this.visible = false
      },5000)
    }
  }
}
</script>


上一篇
[Day 25] Vue Quasar 進度條 1 - Ajax Bar & Loading Bar
下一篇
[Day 27] Vue Quasar 來談談 CSS Helpers
系列文
[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站30

尚未有邦友留言

立即登入留言