Need a unique gift idea?
A Pastebin account makes a great Christmas gift
SHARE
TWEET

Untitled

a guest Mar 8th, 2018 44 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
 
  1. <template>
  2.   <div :class="wrapperClass">
  3.     <div slot="minus" :class="[buttonClass, 'minus']" @click.prevent="decreaseNumber">-</div>
  4.     <input type="text"
  5.       :value="numericValue"
  6.       @keypress="validateInput"
  7.       @change="updateValue($event.target.value)"
  8.       :class="inputClass"
  9.       :min="min"
  10.       :max="max"
  11.       :readonly="readonly"
  12.       debounce="500">
  13.     <div slot="plus" :class="[buttonClass, 'plus']" @click.prevent="increaseNumber">+</div>
  14.   </div>
  15. </template>
  16.  
  17. <script>
  18. export default {
  19.   model: {
  20.     prop: 'value',
  21.     event: 'change'
  22.   },
  23.   props: {
  24.     wrapperClass: {
  25.       type: String,
  26.       default: 'tp-total-number'
  27.     },
  28.     readonly: {
  29.       type: Boolean,
  30.       default: false
  31.     },
  32.     value: {
  33.       type: Number,
  34.       default: 0
  35.     },
  36.     min: {
  37.       default: 0,
  38.       type: Number
  39.     },
  40.     max: {
  41.       default: 100,
  42.       type: Number
  43.     },
  44.     step: {
  45.       default: 1,
  46.       type: Number
  47.     },
  48.     inputClass: {
  49.       default: '',
  50.       type: String
  51.     },
  52.     buttonClass: {
  53.       default: '',
  54.       type: String
  55.     },
  56.     integerOnly: {
  57.       default: false,
  58.       type: Boolean
  59.     }
  60.   },
  61.   data () {
  62.     return {
  63.       numericValue: this.value
  64.     }
  65.   },
  66.   watch: {
  67.     numericValue (val, oldVal) {
  68.       if (val <= this.min) {
  69.         this.numericValue = parseInt(this.min)
  70.       }
  71.       if (val >= this.max) {
  72.         this.numericValue = parseInt(this.max)
  73.       }
  74.       if (val <= this.max && val >= this.min) {
  75.         this.$emit('input', val, oldVal )
  76.       }
  77.     }
  78.   },
  79.   methods: {
  80.     increaseNumber () {
  81.       this.numericValue += this.step
  82.     },
  83.     decreaseNumber () {
  84.       this.numericValue -= this.step
  85.     },
  86.     isInteger (evt) {
  87.       evt = (evt) ? evt : window.event
  88.       let key = evt.keyCode || evt.which
  89.       key = String.fromCharCode(key)
  90.       const regex = /[0-9]/
  91.  
  92.       if (!regex.test(key)) {
  93.         evt.returnValue = false
  94.         if (evt.preventDefault) {
  95.           evt.preventDefault()
  96.         }
  97.       }
  98.     },
  99.     isNumber (evt) {
  100.       evt = (evt) ? evt : window.event
  101.       var charCode = (evt.which) ? evt.which : evt.keyCode
  102.       if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
  103.         evt.preventDefault()
  104.       }
  105.       else {
  106.         return true
  107.       }
  108.     },
  109.     validateInput(evt) {
  110.       if (this.integerOnly === true) {
  111.         this.isInteger(evt)
  112.       }
  113.       else {
  114.         this.isNumber(evt)
  115.       }
  116.     },
  117.     updateValue (value) {
  118.       this.numericValue = Number(value)
  119.     }
  120.   }
  121. }
  122. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top