【javascript】vue和elementui中的键盘事件，el-input-number输入框限制输入数据规则，只能输入正整数，禁止输入除正整数以外的其他字符

本文介绍: key up.native=“UpNum b e r” @key down.native=”UpNum b e r“这是一个Vue.js中的事件绑定语法，用于监听键盘按键事件。其中@keyup.native表示监听键盘松开事件，@keydown.native表示监听键盘按下事件，UpNum ber是自定义的事件处理函数。首先要监听keyup（键盘按下）事件，因为elementUi上面的input 组件监听事件是没有这个事件的，所以可能会报错，所以我们需要加个vue事件的修饰符 .na t i ve，代表原生事件的意思。

想让输入框只能输入正整数，禁止输入除正整数以外的其他字符，利用禁止按键的方法
在element 组件标签上使用键盘事件的时候，需要在事件后面加上.native才能够使用

 <el-input-number :disabled="specsVolDisabled" v-model="specsVolNum" :min="0" :max="20" style="width:60px;" controls-position="right" @keyup.native="UpNumber" @keydown.native="UpNumber" @change="handleChange"/>

@keyup.native=“UpNum ber” @keydown.native=”UpNum ber”这是一个Vue.js中的事件绑定语法，用于监听键盘按键事件。其中@keyup.native表示监听键盘松开事件，@keydown.native表示监听键盘按下事件，UpNumber是自定义的事件处理函数。

在methods里

 handleChange() {

    },
    // 只可输入数字
    UpNumber(e) {
      e.target.value = e.target.value.replace(/[^d]/g, '')
    },
   // 这段代码是一个函数，用于限制输入框只能输入数字。具体来说，当输入框的值发生变化时，该函数会被调用。
   //函数的参数e代表事件对象，其中包含了输入框的信息。
   //函数的第一行代码会将输入框中非数字的字符替换为空字符串，从而实现了只能输入数字的效果。

首先要监听keyup（键盘按下）事件，因为elementUi上面的input 组件监听事件是没有这个事件的，所以可能会报错，所以我们需要加个vue事件的修饰符 .native，代表原生事件的意思。

@keyup在element–ui 组件中失效。这是因为el ement-ui 组件在原生组件的基础上进行了封装。如想使用@keyup则需要在keyup后面追加native关键词。
在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符，只有Button 组件可以监听 click 事件。