vue手机端 搜索框调起带搜索键盘，点击确认自动关闭

本文主要是介绍vue手机端 搜索框调起带搜索键盘，点击确认自动关闭，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果如下图

步骤：

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();})}}

然后就可以实现点击输入框弹窗带搜索，点击搜索后弹窗自动关闭

这篇关于vue手机端 搜索框调起带搜索键盘，点击确认自动关闭的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---