数値入力スピナーを「vue-number-input- spinner」で実装する

vue-number-input- spinnerとは

vue-number-input- spinnerは、最大値最小値の設定ができる数値入力スピナーコンポーネントライブラリです。

独自のClassを設定できたり、ステップ入力を行うことも可能です。

インストール

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

npm

npm install vue-number-input-spinner

CDN

<script src="https://cdn.jsdelivr.net/npm/vue-number-input-spinner@2.2.0/dist/vue-number-input-spinner.min.js"></script>

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

https://github.com/krystalcampioni/vue-number-input-spinner

導入手順

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

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

import NumberInputSpinner from 'vue-number-input-spinner'

（2）WEBページの場合

なし

2.メソッドを設定

上記で取得した NumberInputSpinner をVue.component読み込ませます。

Vue.component('number-input-spinner', NumberInputSpinner);

let app = new Vue({
  el: '#app',
  data: {
    yourVModel: 0
  }
});

3. テンプレートを準備

<NumberInputSpinner /> 設置します。

以下のプロパティを使用することが可能です。

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

<div id="app">
  <number-input-spinner
    :min="0"
    :max="10"
    :step="1"
    :integer-only="true"
    v-model="yourVModel"
  ></number-input-spinner>
</div>

サンプル

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

さいごに

最大値最小値の設定ができる数値入力スピナーコンポーネントライブラリでした。

今日はこの辺でー