目次
vue-rough-notationとは
vue-rough-notationは、Webページ上の注釈を作成およびアニメーション化するコンポーネントライブラリです。
このライブラリは、RoughNotationをVue.js用にラッパーしたものです。
アンダーラインやハイライトなど6種類の注釈タイプを使用することができます。
【動画サイズ:324KB】
環境
Vue | 2.6.10 |
vue-rough-notation | 0.1.10 |
インストール
以下のnpm、CDNを使ってインストールします。
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 メソッドを設定
上記で取得したVueRoughNotationを
Vue.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ページ上の注釈を作成およびアニメーション化するコンポーネントライブラリでした。
今日はこの辺でー