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

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/412073.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【linux002】目录操作命令篇 - ls 命令

文章目录 1、基本用法2、常见选项3、举例演示4、注意事项 ls 命令在 Linux 中用于列出目录内容。它有许多选项和参数可以用来调整显示的格式和内容。 1、基本用法 ls [选项] [文件或目录]2、常见选项 -a 或 --all&#xff1a;显示所有文件&#xff0c;包括以点.开头的隐藏文件…

java 切面日志打印出参入参

切面Controller出入参日志打印 项目结构 切面日志对controller下所有的方法生效 切面代码 Slf4j Aspect Component public class ControllerLogAspect {// 定义一个切点&#xff0c;拦截所有Controller层的public方法Before("execution(public * com.jzt.market.cont…

进程和线程(操作系统八股文part2)

一个操作系统的进程和线程部分的笔记&#xff0c;大部分来源于&#xff1a;小林coding和Javaguide&#xff0c;以及操作系统黑书。 进程和线程 什么是进程 运行中的程序叫进程**&#xff08;Process&#xff09;**。 进程是资源分配的最小单位&#xff0c;线程是执行的最小…

【QT】学习笔记:枚举桌面窗口句柄

在 Qt 中&#xff0c;虽然 Qt 本身没有直接提供枚举桌面窗口的 API&#xff0c;但可以通过调用 Windows API 来实现枚举桌面上所有窗口的句柄&#xff0c;包括子窗口以及子窗口与父窗口的关系。我们可以使用 Windows 的 EnumWindows 和 EnumChildWindows 函数来枚举所有顶层窗口…

K8S声明式的管理方式

一、K8S声明式的管理方式&#xff1a; 1、适合对资源的修改操作 2、声明式管理依赖于yaml文件&#xff0c;所有的内容都在yaml文件中声明 3、编辑好的yml文件还是要靠陈述式命令发布到K8S集群中 二、K8S中支持三种声明式的资源管理方式&#xff1a; 1、deployment格式&…

【YOLO系列】YOLO算法改进史

目录 前言YOLOv1YOLOv2YOLOv3YOLOv4YOLOv5YOLOv6YOLOv7YOLOv8YOLOv9YOLOv10对比待更新 前言 YOLO&#xff08;You Only Look Once&#xff09;是一种革命性的目标检测算法&#xff0c;以其快速和高效的性能而闻名。自2015年YOLOv1的首次推出以来&#xff0c;YOLO系列已经经历了…

Linux常见基础命令

Linux基础 初级学习阶段需要了解的知识一、Linux基础命令查阅命令帮助信息1.man2.help Linux命令的基本实用目录操作文件内容操作查看某文件下的用户操作日志压缩和解压缩sudo用户权限操作用户权限操作TOP文件安装 上一篇 VMware安装linux环境 初级学习阶段需要了解的知识 1.…

音视频入门基础:WAV专题(7)——FFmpeg源码中计算WAV音频文件每个packet的size值的实现

一、引言 从文章《音视频入门基础&#xff1a;WAV专题&#xff08;6&#xff09;——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道&#xff0c;通过FFprobe命令可以显示WAV音频文件每个packet&#xff08;也称为数据包或多媒体包&#xff09;的信息&#xff0…

YOLO环境搭建备忘教程

注&#xff1a;该文本是在完成anaconda、pycharm后进行的过程&#xff0c;请注意&#xff01; 1、conda下创建一个新环境&#xff1a; conda create -n 环境名称 python版本号 #注意各类代码的具体Python版本号 conda create -n Pysidey6 python3.8.1 #注意&#xff1a;3…

rk3566刷机openWrt

文章目录 说明硬件工具软件工具简介驱动安装运行刷机工具配置bootloader和刷机固件连接设备 设备未识别执行刷机执行效果访问openwrt变砖问题 说明 本教程由csdn缘友一世原创&#xff0c;经过亲身实践总结&#xff0c;可以保证有效性&#xff01; 硬件工具 Window电脑(windo…

KEYSIGHT是德 Infiniium EXR系列 示波器

Infiniium EXR系列 示波器 苏州新利通 引言 概述 Infiniium EXR系列 出色的信号完整性让信号纤毫毕现 该系列的所有型号都集成了一个 10 位 ADC&#xff0c;并且在所有通道上同时提供 16 GSa/s 的采样率。高分辨率 ADC 的效用取决于示波器的前端底噪是否足够低以提供与之匹…

二叉搜索树进阶之红黑树

前言&#xff1a; 在上文我们已经学习了AVL树的相关知识以及涉及的四种旋转的内容&#xff0c;但是AVL树追求平衡导致旋转操作过多&#xff0c;一些情况下影响性能&#xff0c;由此我们就来了解一下二叉搜索树的另外一个分支&#xff0c;红黑树。 &#xff08;倘若对旋转知识…

学习笔记——后端项目中的相关技术 【随时更新】

文章目录 1. Session 共享1.0 cookie和session的工作流1.1 Cookie范围1.2 为什么要共享&#xff1f;1.3 如何共享存储1.4 session共享实现 2. 缓存的实现2.1 缓存分类2. 2 Redis 缓存实现2.1.1 Spring data redis&#xff08;推荐使用&#xff09;2.1.2 Redis 的数据结构&#…

C++----简单了解vector

大家好&#xff0c;今天我们来讲讲与string相似的向量类型。之所以说他们是相似的原因是他们其中的数据类型有些效果都是一样的。当然大家不能说&#xff0c;既然是差不多的干嘛还有一个这个啊。不如直接用string就可以了。当然世界名言存在即合理。既然我们都能想到的东西&…

金融知识普及月答题活动

金融知识普及月答题活动 关键词&#xff1a;金融安全、风险防范、金融常识、反诈宣传 推荐功能&#xff1a;答题、倡议书 宣传角度&#xff1a; 1. 普及金融知识&#xff1a;讲解货币、信用、利率、汇率等基本金融概念&#xff0c;以及储蓄、贷款、信用卡、保险等常见金融产…

Unity 图表插件Xcharts的一些坑

XY轴、图例文字不清晰。 2种方法解决 1&#xff1a;老套路&#xff0c;先放大再缩小&#xff0c;像素点多了就清晰了。 2&#xff1a;设置一个单独渲染的UI相机&#xff0c;把canvs所在的UI层级使用深度相机单独渲染,另一个选剔除UI的纯色或天空盒。同时&#xff0c;把改Canva…

基于Spring Boot的文字识别系统

前端使用htmlcssjs&#xff0c;后端使用Spring Boot&#xff0c;数据库使用mysql&#xff0c;识别算法有两个&#xff0c;一个是使用百度OCR接口&#xff0c;一个是自己写一个python&#xff0c;用flask包装。 其中百度OCR接口可以去免费申请&#xff0c;然后把appid、apikey、…

Java Web_00001

目录 Web项目介绍网页的组成部分 HTMLHTML简介HTML示例HTML文件的书写规范HTML标签标签介绍标签的语法&#xff1a;常用标签font特殊字符标题标签超链接列表标签img标签表格标签跨行跨列表格iframe框架标签(内嵌窗口)表单标签表单的显示表单格式化表单提交细节 其他标签 CSSCSS…

OpenHarmony轻松玩转GIF数据渲染

OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;提供了Image组件支持GIF动图的播放&#xff0c;但是缺乏扩展能力&#xff0c;不支持播放控制等。今天介绍一款三方库——ohos-gif-drawable三方组件&#xff0c;带大家一起玩转GIF的数据渲染&#xff0c;搞…

CI/CD实践(五)Jenkins Docker 自动化构建部署Node服务

微服务CI/CD实践系列&#xff1a; 微服务CI/CD实践&#xff08;一&#xff09;环境准备及虚拟机创建 微服务CI/CD实践&#xff08;二&#xff09;服务器先决准备 微服务CI/CD实践&#xff08;三&#xff09;gitlab部署及nexus3部署 微服务CI/CD实践&#xff08;四&#xff09…