Vue.jsでスクロール量をバーで表示する「vue-cobra」

vue-cobraとは

vue-cobraは、ページのスクロール量をバーで表現することができるコンポーネントライブラリです。

良くあるウィンドウのトップにバーを表示することはもちろん、サイド側に表示することも可能です。

【動画サイズ：150KB】

環境

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install vue-cobra --save

yarn

yarn add install vue-cobra

UMD

<script src="https://cdn.jsdelivr.net/npm/vue-cobra@1.1.2/dist/vue-cobra.umd.min.js"></script>

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

https://github.com/flowck/vue-cobra

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import vueCobra from "vue-cobra";

（2）UMDの場合

const vueCobra = window['vue-cobra'].default;

2.メソッドを設定

上記で取得したvueCobraをcomponentsに取り込みます。

new Vue({
  el: '#app', 
  components: {
    'vue-cobra':vueCobra
  }
});
 

3. テンプレートを準備

<vue-cobra> を設置します。

今回はサンプル用に、高さ200pxの要素を10個設置します。

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

<div id="app">
  <vue-cobra 
    :height="10"
    :zIndex="900"
    color="#4fc08d"
    :opacity="0.5"
  ></vue-cobra>
  <div style="height:200px;" v-for="n in 10">200px</div>
</div>

サンプル

>>専用ページで確認する

さいごに

ページのスクロール量をバーで表現することができるコンポーネントライブラリでした。

今日はこの辺でー