效果如下图
步骤:
1.html,所需配置参数都在下图
<el-form :inline="true" :mode="serchFormf" class="searchForm" action="javascript:return true;"><el-form-item label="" ><el-inputsize="small"type="search"clearableref="inputRef"v-model="serchFormf.keyword"@keyup.enter.native="getList(1)"placeholder="广告主ID/公司名称" ><i slot="prefix" class="el-input__icon el-icon-search"></i><el-button slot="append" @click="getList(1)">搜索</el-button></el-input></el-form-item></el-form>
2.js
1.在开始进入页面时,创建一个keydown事件(用于监控键盘)
mounted(){window.addEventListener( 'keydown', function (e) {this.keyDown// 阻止事件冒泡e.stopPropagation();});},
2.在methods中调用该事件(其中keyCode === 13是键盘回车的时候,也就是点击搜索的时候)
methods: {keyDown(e) {if (e.keyCode === 13) {this.getList(1); // 定义的登录方法}},getList(page) {this.$nextTick(()=>{this.$refs.inputRef.blur();})}}