Nuxt.js のカスタムローディングコンポーネントで throttle を再現する
備忘録。
Nuxt.js のローディングにカスタムコンポーネントを使っている際に、描画を遅延させる方法について。
Nuxt.js はローディング画面でデフォルトでプログレスバーを用意してくれている。
このプログレスバーの挙動は nuxt.config.js
の loading
で設定できる。特にページ遷移時にプログレスバーがちらつくのを防止するために、throttle
フィールドでプログレスバーの表示をディレイさせることができる。
loading: { throttle: 300 // ディレイ時間をデフォルトの200ミリ秒から300ミリ秒に変える }
さて、ローディングの表現にはデフォルトのプログレスバーではなく独自のコンポーネントを使うこともできる。
loading: '~/components/LoadingAnimation'
この場合、throttle
のような設定フィールドは使えないので、ディレイは自分で実装する必要がある。といっても難しいことはなく、Nuxt.js のデフォルトのプログレスバーの実装を参考にすればいい。
const throttle = 200 export default { data(): { return { visible: false } } methods: { start(): { this.clear() this._throttle = setTimeout(() => show(), throttle) }, finish() { this.clear() }, show() { this.visible = true }, clear() { this.visible = false clearTimeout(this._throttle) } }, beforeDestroy () { this.clear() } }