Miscellaneous UI Components vue.js ライブラリ

自動でページの目次を作成する「vue-side-catalog」

自動でページの目次を作成する「vue-side-catalog」

vue-side-catalogとは

vue-side-catalogは、ページの<h2>/<h3>/<h4>などのタグに反応して、自動的に目次を作成してくれるライブラリです。

オプション設定をすることで、現在の位置から目次見出しの箇所を教えてくれる機能もあります。

 

自動でページの目次を作成する「vue-side-catalog」

 

環境

Vue 2.6.10
vue-side-catalog 1.0.4

 

インストール

以下のnpmCDNを使ってインストールします。

npm

npm install vue-side-catalog -S

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/vue-side-catalog.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vue-side-catalog.umd.min.js"></script>

 

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

https://github.com/yaowei9363/vue-side-catalog

 

導入手順

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

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

import SideCatalog from 'vue-side-catalog'
import 'vue-side-catalog/lib/vue-side-catalog.css'

(2)CDNの場合

const SideCatalog = window['vue-side-catalog'].default;

2.メソッドを設定

SideCatalogcomponentsに取り込みます。

見出しを取得したい要素のidもしくはclasscontainerElementSelectorプロパティに設定します。

new Vue({
  el: '#app',
  components: {
    'side-catalog':SideCatalog
  },
  data: {
    catalogProps:{
        containerElementSelector: '#main',
        openDomWatch: true,
    }
  }
});

3. テンプレートを準備

<side-catalog> を設置します。

プロパティに上記で作成したcatalogPropsを設定します。

 

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

<div id="app">
  <div id="main">
    <h1>h1</h1>  
    <h2>h2</h2>  
    <h3>h3</h3>
    <h4>h4</h4>
  </div>
  <side-catalog v-bind="catalogProps"></side-catalog>
</div>

 

サンプル

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

 

さいごに

ページの<h2>/<h3>/<h4>などのタグに反応して、自動的に目次を作成してくれるライブラリでした。

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Miscellaneous, UI Components, vue.js, ライブラリ
-, , ,