Vue.jsで虫眼鏡みたいに画像を拡大してみる「vuejs-magnifier」

vuejs-magnifierとは

vuejs-magnifierは、Vue.jsを使って画像を虫眼鏡でみるように拡大してみる事ができるコンポーネントライブラリです。

【ファイル容量：432KB】

環境

インストール

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

npm

npm i vuejs-magnifier

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/magnifiercomponent.umd.js"></script>

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

https://github.com/ali-sharafi/vuejs-magnifier

導入手順

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

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

<span class="pl-s1"><span class="pl-k">import</span> <span class="pl-smi">Magnifier</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>vuejs-magnifier<span class="pl-pds">'
</span></span></span>

（2）CDNの場合

const Magnifier = window['Magnifier'].default;

2.メソッドを設定

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

Vue.use(Magnifier);
new Vue({
  el: '#app'
});
 

3. テンプレートを準備

<magnifier> を設置します。

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

<div id="app">
  <magnifier 
    src="https://images.unsplash.com/photo-1453831362806-3d5577f014a4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=650&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" 
    :glass-width="150" 
    :glass-height="150"
    :width="650"
    :height="500"
    :zoom-level="3"
  ></magnifier>
</div>

サンプル

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

さいごに

Vue.jsを使って画像を虫眼鏡でみるように拡大してみる事ができるコンポーネントライブラリです。

今日はこの辺でー