如何用element写数字输入框

关于输入框，element给我们只举了几个简单的例子，而怎么把普通的输入框变成数字输入框，则只要在el-input上添加一个type属性，值为number就可以解决。

<el-input v-model="inputValue" placeholder="请输入数字" type="number"></el-input>

效果图

这样就可以单纯的只能输入文字，但是当选择文本框的时候，右边会显示2个小箭头，特别影响美观，强迫症的我肯定是要干掉的，于是输入以下代码

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button
    {
        -webkit-appearance:none ;
    }
    //firefox要用如下代码才能实现隐藏
    input[type="number"]{
        -moz-appearance:textfield ;
    }

其中 ::-webkit-outer-spin-button就是chrome的上下箭头，直接设置为none，就能使上下箭头隐藏起来，而 -webkit-inner-spin-button的具体是干嘛的，题主也不知道，不加入这个伪类，设置appearance的属性为none浏览器的上下小箭头一样会没掉。
(appearance 大概作用是改变浏览器上按钮或者控件的外观，比如值为button，在浏览器上就出现按钮的样式，但是试了很久，chrome、ie都没出现所说的效果，火狐有效果。
ie跟firefox浏览器时type=number是没效果的，需要自己写过滤事件（ie活该给骂是最垃圾的浏览器）
）

• -moz：匹配baiFirefox浏览器
  -webkit：匹配Webkit枘核浏览器，如duchrome and safari
  -moz代表firefox浏览器私有属性-ms代表ie浏览器私有属性-webkit代表safari、chrome私有属性

本来以为这样功能就完成了，结果测试小姐姐来说，这个输入框可以输入字母e，这是因为e在数学上代表无理数，e是自然对数的底数，是一个无限不循环小数，其值是2.71828…，所以在输入e时，输入框认为是数字。竟然是bug，那就只能干掉。

1. 增加键盘监听事件
   按键监听事件一共有3个可以选择，触发的顺序为 keydown -> keypress ->keyup。前面2个触发的时候文本还没输出到文本框，而keyup触发时浏览器已经将输入的数字渲染到文本框中，因此选择keydown、keypress都可以。
   由于el-input是一个vue组件，所以绑定事件时候要加上.native来监听原生事件,因为tyepe的属性在firefox跟ie没有效果，所以这边就直接通过写键盘监听事件来过来掉。

 <el-input v-model="inputValue" placeholder="请输入数字"  @keypress.native="numberInput"></el-input>

2.编写监听事件

	numberInput:function(e){
      e.returnValue=/\d/.test(e.key)
    }

通过e.key获取到按下去时按钮对应的字符，然后通过正则表达式判断该字符是否是数字，如果是的话返回true则会将输入的值显示到文本框，false则是取消这一默认行为。

全部代码如下 在vue的组件里编写的

<template>
  <div>
    <el-input v-model="inputValue" placeholder="请输入数字"  @keypress.native="numberInput"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
    };
  },
  methods: {
    numberInput:function(e){
      // e.value = /[^\\d\\.]/.test(e.value)
      e.returnValue=/\d/.test(e.key)
      console.log(e);
    }
  }
};
</script>
<style>
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>