element-ui el-input “type=number“的上下箭头去掉改造成加减按钮

项目中要用到数量的增加，但同时又想实时监听数值的变化，el-input-number样式满足，但无法监听input事件，watch也没法拿到实时的数值

遂用el-input去模拟el-input-number的样式

html：

 <el-form-item label="申请数量" ">
   <el-input @input="((val)=>{handleNumChange(val,index)})" type="number" v-model="item.num">
    <el-button @click="handleMinus(index)"  slot="prepend" icon="el-icon-minus"></el-button>
    <el-button @click="handlePlus(index)"   slot="append" icon="el-icon-plus"></el-button>
   </el-input>
 </el-form-item>

css：去除type=number的上下箭头 

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/ input[type='number'] {
  -moz-appearance: textfield !important;
}

 js

  handleMinus(index){
      this.ruleForm.giftList[index].num --;
   },
   handlePlus(index){
      this.ruleForm.giftList[index].num ++;
   },

但是值得说的是，这样的“el-input-number”当监听的是input 事件的时候，用按钮加减来改变数量是无法触发input事件的，需要再handle加减的处理函数中加一个调用如下：

   handleMinus(index){
      this.ruleForm.giftList[index].num --;
      this.debounce(this.getRegisterTotalPrice, index,500);
   },
   handlePlus(index){
      this.ruleForm.giftList[index].num ++;
      this.debounce(this.getRegisterTotalPrice, index,500);
   },

当然，如果用watch就不会存在这样的问题，但由于这个需求是在动态新增表单中遇到的，用watch的话会造成一些问题，遂未采用。