忘れないように記録しとこ

カバの樹

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

vue-rough-notationとは

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

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

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

 

【動画サイズ:324KB】

 

環境

Vue 2.6.10
vue-rough-notation 0.1.10

 

インストール

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

npm

npm install --save vue-rough-notation

UMD

<script src="https://cdn.jsdelivr.net/npm/vue-rough-notation@0.1.10/dist/vue-rough-notation.min.js"></script>

 

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

 

導入手順

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

  • ES6等の場合
    import VueRoughNotation from 'vue-rough-notation'; 
  • UMDの場合
    const VueRoughNotation = window['VueRoughNotation'];  

step.2 メソッドを設定


上記で取得したVueRoughNotationVue.useに取り込みます。

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>

サンプル

さいごに

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

今日はこの辺でー

 

  • B!