import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

<template>
 <div id="app">
  <router-view/>
 </div>
</template>

<script>
export default {
 name: 'App'
}
</script>

// import引入路由組件
import Vue from 'vue'
import Router from 'vue-router'
import inputNumber from '@/components/inputNumber'
Vue.use(Router)
// 然后定義路由(routes)，并創(chuàng)建路由實(shí)例
export default new Router({
 routes: [
  {
   path: '/',
   name: 'index',
   component: inputNumber
  }
 ]
})

// 判斷輸入的值是否為數(shù)字
function isValueNumber (value) {
 var reg = /^[0-9]+.?[0-9]*$/
 if (reg.test(value)) {
  return true
 }
 return false
}
// 切記將此函數(shù)暴露，否則無法調(diào)用
export {
 isValueNumber
}

<template>
 <div>
   // 雙向綁定value，并設(shè)默認(rèn)值為5，最大值為100，最小值為0
   <input-count v-model="value" :max="100" :min="0"></input-count>
 </div>
</template>

<script>
//引入子組件
import inputCount from '../components/inputCount'
export default {
 data () {
  return {
   value: 5 //設(shè)置初始值為5
  }
 },

 components: {
  inputCount
 }
}
</script>

<template>
 <div class="input-number">
  <input type="text" :value="currentValue" @change="handleChange" @keyup.down="handleDown" @keyup.up="handleUp"/>
  <button @click="handleDown" :disabled="currentValue <= min" >-</button>
  <button @click="handleUp" :disabled="currentValue >= max">+</button>
 </div>
</template>

<script>
// 引入判斷函數(shù)
import { isValueNumber } from '../common/number'
export default {
 data () {
  return {
   step: 10, // 控制步伐
   currentValue: this.value //初始化引用父組件value
  }
 },
 props: {
  max: {
   type: Number,
   default: Infinity
  },
  min: {
   type: Number,
   default: -Infinity
  },
  value: {
   type: Number,
   default: 0
  }
 },
 // 監(jiān)聽選項(xiàng)用來監(jiān)聽某個(gè)prop或data的改變，當(dāng)它們發(fā)生變化時(shí)，就會(huì)觸發(fā)watch配置的函數(shù)
 watch: {
  currentValue: function (val) {
   // 使用v-model時(shí)改變value
   this.$emit('input', val)
   // 觸發(fā)自定義事件on-change事件，用于告知父組件數(shù)字輸入框的值有所改變
   this.$emit('on-change', val)
  },
  value: function (val) {
   this.updateValue(val)
  }
 },
 methods: {
  handleDown: function () {
   if (this.currentValue <= this.min) return
   this.currentValue -= this.step
  },
  handleUp: function () {
   if (this.currentValue >= this.max) return
   this.currentValue += this.step
  },
  // 過濾出一個(gè)正確的currentValue
  updateValue: function (val) {
   if (val > this.max) val = this.max
   if (val < this.min) val = this.min
   this.currentValue = val
  },
  // 判斷輸入的值是否為數(shù)字
  handleChange: function (event) {
   // e.target.value:指向事件執(zhí)行時(shí)鼠標(biāo)所點(diǎn)擊區(qū)域的那個(gè)元素的值
   // trim():刪除字符串開始和末尾的空格
   var val = event.target.value.trim()
   var max = this.max
   var min = this.min
   if (isValueNumber(val)) {
    val = Number(val)
    this.currentValue = val
    if (val > max) {
     this.currentValue = max
    } else if (val < min) {
     this.currentValue = min
    }
   } else {
    event.target.value = this.currentValue
   }
  }
 },
 // 第一次初始化需對(duì)value進(jìn)行過濾
 mounted: function () {
  this.updateValue(this.value)
 }
}
</script>