Vue.jsでスクロールの進行状況プログレスバーを実装する「vue-read-progress」

vue-read-progressとは

vue-read-progressは、ページのスクロールの進行状況をプログレスバーで表示できるコンポーネントライブラリです。

【動画サイズ：1.6MB】

環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, yarn, CDNのどれか一つを使用します。

npm i vue-read-progress 

yarn add vue-read-progress

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-read-progress.umd.js"></script>

gitリポジトリは以下から取得できます。

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、スクロールの進行状況プログレスバーを実装します。

step
1ライブラリの呼び出し

まずライブラリを呼び出す為に、以下の２通りのケースで呼び出します。

ES6等で実装する場合

import VueReadProgress from "vue-read-progress";

UMDで実装する場合

const VueReadProgress = window['VueReadProgress']; 

step
2メソッドを設定

new Vue({
  el: '#app',
  components: {
    'vue-read-progress': VueReadProgress
  }
});

step
3テンプレートを準備

<vue-read-progress>タグを配置します。

サンプルはケバブケースで記載しています。

<div id="app">
  <vue-read-progress></vue-read-progress>
  <p v-for="n in 10">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis sem quis quam imperdiet imperdiet ac id lectus. Aenean tristique quis ipsum vel pretium. Fusce efficitur sem massa, sit amet eleifend mauris lobortis pharetra. Suspendisse dignissim tortor at venenatis faucibus. Donec efficitur vitae metus vel rhoncus. 
  </p>
</div>

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

See the Pen Vue.jsでスクロールの進行状況クロールバーを実装する「vue-read-progress」 by カバの樹 (@kabanoki) on CodePen.dark

さいごに

ページのスクロールの進行状況をプログレスバーで表示できるコンポーネントライブラリでした。

今日はこの辺でー