loading 開關

預設 loading 開關為 true，如想關閉 loading 可在 nuxt.config.js 設定

1
2
3

export default {
  loading: false,
};

修改 loading 樣式

nuxt.config.js

export default {
  loading: {
    color: 'blue',
    height: '5px',
  },
};

客製 loading

在 components 目錄新增一個 loading.vue

<template lang="html">
  <div class="loading-page" v-if="loading">
    <p>Loading...</p>
  </div>
</template>

export default {
  data: () => ({
    loading: false,
  }),
  methods: {
    start() {
      this.loading = true;
    },
    finish() {
      this.loading = false;
    },
  },
};

.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
  z-index: 999;
}

在 nuxt.config.js 設定 loading 的組件

1
2
3

export default {
  loading: '~/components/loading.vue',
};

點擊開關 loading

可以從 this.$nuxt 的物件，去抓 $loading，$loading 就是 components/loading.vue 的組件

1	<button @click="openLoading">loading</button>

methods: {
  openLoading() {
    this.$nuxt.$loading.start(); // 啟動 loading

    setTimeout(() => {
      this.$nuxt.$loading.finish(); // 關閉 loading
    }, 2000);
  }
},