區塊內的讀取 Inner Loading

Inner Loading

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

引入

framework: {
  components: [
  'QInnerLoading',

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

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

注意事項

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

基本操作

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

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>