菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
20
0

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

原创
05/13 14:22
阅读数 1317
因为使用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/200
20 点赞
0 评论
收藏
为你推荐 换一批