import inputNumber from './main/input-number.vue'
inputNumber.install = function(Vue) {
 Vue.component(inputNumber.name, inputNumber);
};
export default inputNumber

<template>
 <div class="cc-input-number">
 // 左側(cè)的':heavy_minus_sign:'符號(hào)
 <div class="cc-input-number__reduce">
  // 自己封裝的icon組件, 出鏡率還挺高:smirk_cat:.
  <cc-icon name='cc-reduce2'/>
 </div>
 // 中間的顯示與輸入部分,讓人又愛又恨的number屬性
 // 下面的屬性就能干掉凡人的上下按鈕
 // input::-webkit-outer-spin-button,
 // input::-webkit-inner-spin-button {
 // -webkit-appearance: none;
 // }
 <input ref="input"
   type="number"
   class="cc-input-number__input">
 <div class="cc-input-number__add">
  <cc-icon name='cc-add2'/>
 </div>
 </div>
</template>

// 減少
 <div class="cc-input-number__reduce"
   @click='reduce'>
 // 增加
<div class="cc-input-number__add"
   @click="add">
// 輸入框的監(jiān)控
<input ref="input"
  type="number"
  class="cc-input-number__input"
  @input="inputChange($event)">

props: {
 max: { type: Number }, // 數(shù)字不傳默認(rèn)是undefined
 min: { type: Number },
 step: { // 每次計(jì)算的單位
  type: Number,
  default: 1
 },
 value: { 
 // 綁定的數(shù)值, 這里允許兩種type, 為了方便用戶書寫,具體判斷下面我們自己寫
  type: [String, Number],
  required: true
 },
 precision: { // 顯示小數(shù)點(diǎn)后幾位數(shù)
  type: Number,
  validator(value) {
  if (value < 1 || value === undefined) {
   return 1;
  } else {
   return parseInt(value);
  }
  }
 }
 },

add() {
// 很可能用戶就輸入了一個(gè)string屬性, 
// 1: 比如后臺(tái)返回的就是字符串;
// 2: input框輸入的就是字符串類型;
// 3: 用v-model綁定了同樣的值的其他組件賦予了這個(gè)值string類型;
 let num = Number(this.value) + this.step; // 加上固定的長(zhǎng)度
// 這里我們抽象出一個(gè)專門負(fù)責(zé)數(shù)值的變化的函數(shù)
 this.emitVal(num);
},

reduce() {
  let num = Number(this.value) - this.step;
  this.emitVal(num);
 },

inputChange(e) {
// 這里就有可能出現(xiàn)string類型的了
  this.emitVal(Number(e.target.value));
 },

emitVal(newVal) {
  let { max, min } = this;
  // 不傳參數(shù)的時(shí)候默認(rèn)值就是undefined
  // 對(duì)這個(gè)值的限制就是, max之內(nèi), min以上
  if (max !== undefined && newVal > max) newVal = max;
  if (min !== undefined && newVal < min) newVal = min;
  // 這里兼容一下位數(shù)控制
  let value = Number(newVal).toFixed(this.precision);
  // 這個(gè)oldVal下面會(huì)解釋:point_down:
  if (value === this.oldVal) return;
  this.oldVal = ls;
  // 發(fā)出兩個(gè)事件, 一個(gè)負(fù)責(zé)改變value, 一個(gè)負(fù)責(zé)返回給用戶
  // 畢竟用戶不可能監(jiān)聽input事件然后再把值附上去, 太麻煩
  this.$emit("input", value);
  this.$emit("change", value);
  // 這一步很重要
  // 下面會(huì)詳細(xì)說
  this.$refs.input.value = value;
 }

watch: {
 value: {
  handler() {
  // 為了解決, 多組件共同v-model采用的這個(gè)方法, 也算是另辟蹊徑了
  let { value, time } = this;
  clearTimeout(time);
  // 畢竟把它放入宏任務(wù)Macrotasks可以躲過很多無限循環(huán).
  time = setTimeout(() => {
   if (value !== undefined) this.emitVal(value);
  });
  },
  // 這個(gè)是開啟進(jìn)頁面的瞬間就出發(fā)一次的意思, 很有用, 但是數(shù)據(jù)稍大會(huì)消耗性能, 慎用
  // watch還有一個(gè)deep屬性, 更是吃性能吃的厲害, 可以深度監(jiān)控里面的數(shù)據(jù)
  immediate: true
 }
 }

computed: {
 valueMin() {
  if (this.value === this.min) return "#bbbbbb";
  return "";
 },
 valueMax() {
  if (this.value === this.max) return "#bbbbbb";
  return "";
 }
 },

<cc-icon size='25px'
   name='cc-add2'
   :color="valueMax" />

<div class="cc-input-number__reduce"
   @click='reduce'>
  <slot name='left'>
  <cc-icon size='25px'
     name='cc-reduce2'
     :color='valueMin' />
  </slot>
 </div>
vue-cc-ui/src/style/inputNumber.scss

@import './common/var.scss';
@import './common/extend.scss';
@import './common/mixin.scss';
@import './config/index.scss';

@include b(input-number) {
// 友好的小手
 cursor: pointer;
 // 有個(gè)放大動(dòng)畫, 看過我文章的同學(xué)都知道, 操作類的組件, 我喜歡有一個(gè)懸停放大效果.
 transition:all .1s;
 align-items: center;
 display: inline-flex;
 background-color: white;
 &:hover {
 // 放大被其他組件擋住就劃不來了
  z-index: 6;
  transform: scale(1.2);
 }
 // 招牌陰影
 @include commonShadow($--color-black);
 @include e(add) {
  @include flexCenter();
  padding: 4px 6px;
 }
 @include e(reduce) {
  @include flexCenter();
  padding: 4px 6px;
 }
 @include e(input) {
 // 去掉輸入框的默認(rèn)樣式
  border: none;
  outline:none;
  display: block;
  text-align: center;
  width:60px;
  height: 20px;
 }
}