vue 搜索框回车键触发 搜索事件

2,195 阅读1分钟

一:结合elemt-ui的i-input输入框,当你输入之后敲回车想要打印值

@keydown.enter.native="searchEnterFun"

image.png

image.png

二:不使用组件库的 input

<input type="text" class="address" placeholder="请输入门店名称"  v-focus v-model ="searchName" />

界面中需要有一个聚焦 v-focus,在回车时才好执行keypress

created () {

    let that = this;

    document.onkeypress = function(e) {

      var keycode = document.all ? event.keyCode : e.which;

      if (keycode == 13) {

       that.location();   // 登录方法名

        return false;

      }

    };

  },

注册局部指令,组件中也接受一个directives的选项:vue官网文档

directives: {

    focus: {

      // 指令的定义

      inserted: function (el) {

        el.focus()

      }

    }

  },