Merge pull request #10 from morsaPT/master

Added: inputclass prop to specify a diferent class name for the input…

Author: joseluisq

README.md

@@ -29,6 +29,7 @@ npm install vue-input-number --save-dev
         :min="10"
         :max="100"
         :maxlength="3"
+        :inputclass="'v-input-number-input'"
         @onInputNumberChange="onChange"></input-number>
 
 </template>
@@ -68,6 +69,7 @@ For more detailed example check out [the app directory](./app).
 - __mousedown:__ Enable mousedown for increment or decrement value.
 - __integer:__ Enable integer value only.
 - __placeholder:__ Set a input placeholder. If `placeholder` has some value then `min` is not used as a placeholder.
+- __inputclass:__ Set a diferent class for the input element. For example, if you use Bootstrap default input class you can set `:inputclass="'form-control'"` to use `form-control` class in the input element.
 
 ## Events
 

app/app.vue

@@ -18,6 +18,7 @@
         :max="options.max"
         :maxlength="options.maxlength"
         :placeholder="options.placeholder"
+        :class="options.inputclass"
         @onInputNumberChange="inputChange"></input-number>
     </p>
 
@@ -35,7 +36,8 @@ interface Options {
   min: number,
   max: number,
   maxlength: number,
-  placeholder: String
+  placeholder: String,
+  inputclass: String
 }
 
 @Component
@@ -45,7 +47,8 @@ export default class App extends Vue {
     min: 1,
     max: 100,
     maxlength: 3,
-    placeholder: 'Enter a number'
+    placeholder: 'Enter a number',
+    inputclass: 'v-input-number-input'
   }
 
   inputValue: number = 1

index.vue

@@ -18,7 +18,7 @@
       :maxlength="maxlength" 
       autocomplete="off"
       :placeholder="placeholder"
-      class="v-input-number-input"
+      :class="inputclass"
       v-model.number="quantity"
       @keyup="onKeyup($event)"
       @keydown="onKeydown($event)"
@@ -65,6 +65,10 @@ export default {
     placeholder: {
       type: String,
       default: ''
+    },
+    inputclass: {
+      type: String,
+      default: 'v-input-number-input'
     }
   },