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

最新推荐文章于 2024-08-29 20:00:00 发布

觉醒的程序猿

最新推荐文章于 2024-08-29 20:00:00 发布

阅读量80

点赞数

文章标签： vue.js 计算机外设前端

本文链接：https://blog.csdn.net/qq_42740298/article/details/141676906

版权

效果如下图

在这里插入图片描述
步骤：

1.html,所需配置参数都在下图

<el-form :inline="true" :mode="serchFormf" class="searchForm"  action="javascript:return true;">
      <el-form-item label="" >
        <el-input
          size="small"
          type="search"
          clearable
          ref="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();
      })
      }
  }

在这里插入图片描述