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/vue-read-progress@1.0.4/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>

サンプル

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

さいごに

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

今日はこの辺でー