vue-ivew input 框 回车搜索功能

 

1. 添加事件

 <FormItem prop="user" label="产品ID:" :label-width="80">
              <Input type="text" v-model="formInline.productCode" @keydown.enter.native="searchEnterFun"></Input>
            </FormItem>

键盘事件主要有2个：

onkeydown : 键盘按下时触发,如果按下不抬起，那么会连续触发。

onkeyup : 键盘弹起时触发

不是所有元素都能接收键盘事件，只有能够响应用户输入的元素，换言之，能够接收焦点的元素就能接收键盘事件。

2.方法

searchEnterFun(e) {
        console.log(111);
        //which 和 keyCode 属性提供了解决浏览器的兼容性的方法。
        //keyCode属性返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码
        var keyCode = window.event? e.keyCode:e.which;
        if (keyCode == 13) {
            this.getproductlist(1, 20);  //搜索事件
        }
     },