vue.js项目 el-input组件及原始input 监听回车键实现搜索功能
1、使用@keyup.enter.native和@keyup.enter监控input按下enter确认键触发查询提交
两种监控实现不同，@keyup.enter.native对应点的是基于element-ui 组件，而@keyup.enter则是原始的input输入框
2、实现效果
3、实现示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="审批人">
<el-input v-model="formInline.user" placeholder="审批人" @keyup.enter.native="keyupEnterHandler"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="formInline.region" placeholder="活动区域" @change="onSubmit">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="原始标签">
<input placeholder="申请人" v-model="formInline.apply" type="text" @keyup.enter="keyupEnterHandler">
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
formInline: {
user: '',
region: '',
apply: ''
}
}
},
methods: {
keyupEnterHandler(e) {
var keyCode = window.event ? e.keyCode : e.which;
//判断按下的键是否为enter确认键
if (keyCode == 13) {
this.onSubmit();
}
},
onSubmit() {
var data = JSON.stringify(this.formInline)
this.$message.success('submit search:' + data);
}
}
})
</script>
</html>本文作者： Liaodeity
本文链接： https://www.jianbaizhan.com/article/652
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！