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

2019年11月15日

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

vue-number-input- spinnerとは

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

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

 

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

 

インストール

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

npm

npm install vue-number-input-spinner

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 /> 設置します。

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

min 最小値を設定できます。
max 最大値を設定できます。
step クリックした時に設定数増減します。
integerOnly 数字のみ設定できます。

 

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

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

 

サンプル

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

 

さいごに

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

今日はこの辺でー

 

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Form, Spinner, UI Components, vue.js, ライブラリ
-, , , , ,