Webページ上の注釈を作成およびアニメーション化するライブラリ「vue-rough-notation」

vue-rough-notationとは

vue-rough-notationは、Webページ上の注釈を作成およびアニメーション化するコンポーネントライブラリです。

このライブラリは、RoughNotationをVue.js用にラッパーしたものです。

アンダーラインやハイライトなど6種類の注釈タイプを使用することができます。

【動画サイズ：324KB】

環境

インストール

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

npm

npm install --save vue-rough-notation

UMD

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-rough-notation.min.js"></script>

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

導入手順

step
2メソッドを設定

Vue.use(VueRoughNotation);

new Vue({
  el: '#app', 
  data: {
    annotations: 
    {
      show: false,
      type: "underline",
      color: "#b71c1c",
      content: {
        title: "underline",
        p1: "Create a sketchy",
        draw: "underline",
        p2: "below an element."
      }
    }
  }
});

step
3テンプレートを準備

各種コンポーネントを設置します。

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

<div id="app">
  <div :key="annotations.type" >
      <div>
        <h3>
          <rough-notation
            :type="annotations.type"
            :color="annotations.color"
            :is-show="annotations.show"
          >{{ annotations.content.title }}</rough-notation>
        </h3>
        <p>
          {{ annotations.content.p1 }} {{ ' ' }}
          <rough-notation
            :type="annotations.type"
            :color="annotations.color"
            :is-show="annotations.show"
          >{{ annotations.content.draw }}</rough-notation>
          {{ '' }} {{ annotations.content.p2 }}
        </p>
        <button @click="annotations.show = !annotations.show">annotate</button>
      </div>
    </div>
</div>

サンプル

See the Pen Webページ上の注釈を作成およびアニメーション化するライブラリ「vue-rough-notation」 by カバの樹 (@kabanoki) on CodePen.dark

さいごに

Webページ上の注釈を作成およびアニメーション化するコンポーネントライブラリでした。

今日はこの辺でー