菜单 学习猿地 - LMONKEY

解决Element UI input输入框不能使用回车进行搜索

lara_6 profile image lara_6 ・1 min read
因为使用vue修饰符绑定键盘事件报错,不知道怎么解决...
所以想出了一个神奇的解决方法...

1、绑定输入事件,每次输入就把输入的内容存到本地储存

<el-input placeholder="搜索一下" v-model="searchInput" @input="inputSearchInfo" clearable></el-input>


//输入搜索内容
inputSearchInfo() {
    localStorage.setItem('searchInput', this.searchInput);//存入本地  
}

2、使用jQuery键盘事件解决

import myVue from '../main.js'

$(document).ready(function () {
  //判断搜索框是否获得焦点
  var searchInpuIsFocus = false;
  $('.nav .nav-search input').focus(function () {
    searchInpuIsFocus = true;
  })
  $('.nav .nav-search input').blur(function () {
    searchInpuIsFocus = false;
  })

  //监听键盘事件
  $(document).keydown(function (event) {
    var searchInfo = localStorage.getItem('searchInput').trim();//本地取出
    //按下回车、输入不为空、搜索内容跟上次不相同时跳转路由
    if (event.keyCode === 13 && searchInfo != '' && myVue.$route.params.value != searchInfo) {
      myVue.$router.push({ path: '/search/' + searchInfo }); //跳转到搜索结果页面
    }
    //按下回车、输入为空、搜索框获得焦点时弹出错误提示
    else if (event.keyCode === 13 && searchInfo == '' && searchInpuIsFocus) {
      myVue.$message({
        showClose: true,
        message: '搜索内容不能为空!',
        type: 'error'
      });
    }
  });
})

评论 (0)