目次
vue-img-inputerとは
vue-img-inputerは、単一画像専用のプレビューアップローダーのコンポーネントライブラリです。
よくある複数のファイルをアップロードできるライブラリとは違い、単一のファイルのアップロードに制限することでシンプルに実装し易くなっています。
環境
Vue | 2.6.10 |
vue-img-inputer | 2.1.6 |
インストール
以下のnpm、CDNを使ってインストールします。
npm
npm install vue-img-inputer
CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
gitリポジトリは以下から取得できます。
https://github.com/waynecz/vue-img-inputer
導入手順
1. ライブラリの取り込み
(1)ES6等の場合 [注意]モジュール版は未検証です。
import ImgInputer from 'vue-img-inputer' import 'vue-img-inputer/dist/index.css'
(2)CDNの場合
const ImgInputer = window['vueImgInputer'];
2.メソッドを設定
上記で取得したImgInputerを Vue.component
に取り込みます。
Vue.component('img-inputer', ImgInputer) new Vue({ el: '#app', data: { file:'' } });
3. テンプレートを準備
<img-inputer>
を設置します。
[注意] サンプルはケバブケースで記載しています。
<div id="app"> <img-inputer v-model="file" theme="light" size="large" placeholder="ファイルをここにドラッグする" bottom-text="ファイルをドロップするかここをクリックしてください" /> </div>
サンプル
さいごに
単一画像専用のプレビューアップローダーのコンポーネントライブラリでした。
今日はこの辺でー