因为使用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'
});
}
});
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。