input聚焦,失去焦点的那些事

需求:
1:搜索输入时显示清空按钮和搜索按钮;
2:点击搜索按钮失去焦点,并查询;
3:点击清空按钮后重新聚焦;

需要解决的问题:
1:失去焦点需要别的处理的话要加延时器,跟内部机制执行顺序有关;
2:像清空时再次聚焦就需要mousedown事件处理,否则无法聚焦

代码示例

html

<view class="search-main"><input ref="searchInput" class="search-input" v-model="state.searchVal" placeholder="请输入关键字"@focus="isFocus" @blur="isBlur" @confirm="goSearch" clearable /><view class="right-box"><image class="del-img" src="https://lfrz1.stor.enncloud.cn/enn-oss/account2688/clear82798.png"@mousedown="blutStop" @click.stop="clearInput" v-show="state.searchVal.length>0 && state.isFocu"></image><view :class="['add-search',state.searchVal.length==0 && state.isFocu?'add-opacity':'']"@click="goSearch" v-show="state.searchVal.length>0||state.isFocu">搜索</view></view><image class="search-ico" src="https://lfrz1.stor.enncloud.cn/enn-oss/account2688/sousuo52335.png"></image></view>

js

     // 搜索框失去焦点const isBlur = (event) => {setTimeout(() => {state.isFocu = false;}, 300)}const blutStop = (e) => {e.preventDefault();}//去搜索const goSearch = () => {if (state.searchVal.length == 0) returnCommon.navigateTo({url: `/subPagesB/pages/helpCenter/search?value=${state.searchVal}`,});}//搜索框清空const clearInput = () => {state.searchVal = '';state.isClear = true;}

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

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

相关文章

Linux命令——nc

Linux命令——nc 文章目录 Linux命令——nc例子客户端/服务端模型数据传输与服务端交互端口扫描使用代理发送文件聊天工具一次性 Web Server文件夹传输远程克隆磁盘shell反向 shell 参考 netcat&#xff0c;简写为 nc&#xff0c;是 unix 系统下一个强大的命令行网络通信工具&a…

JS手写Promise.all方法

测试例子 var f11 Promise.resolve("111");var f22 Promise.resolve("222");var f33 Promise.resolve("333");// var f33 Promise.reject("333");1、用原生 Promise 实现 逻辑说明&#xff1a;接收一个由多个promise方法组成的数组…

uniapp开发小程序-pc端小程序下载后端接口的二进制流文件

fileName包含文件名后缀名&#xff0c;比如test.png这种格式 api.DownloadTmtFile后端接口返回的是文件的二进制流 值得注意的是&#xff0c;微信开发者工具中是测试不了wx.saveFileToDisk的&#xff0c;需要真机或者体验版测试 handleDownload(fileName) {if (!fileName) retu…

mysql表的字段建议加上NOT NULL约束

mysql的列加上NOT NULL约束&#xff0c;这是一个好的实践&#xff08;但不是一个强制要求&#xff09;&#xff0c;因为它能带来一些好处&#xff0c;例如&#xff1a; 设置为NOT NULL&#xff0c;可以确保该列没有NULL值&#xff0c;对该列的数据的规范性进行约束。加上NOT N…

大文件传输软件和传统软件的优缺点

在当前信息时代&#xff0c;文件和数据的传输已成为我们工作和生活中不可或缺的一环。无论是向同事发送报告还是与朋友分享电影&#xff0c;我们都需要依赖软件完成这些操作。然而&#xff0c;随着文件和数据容量的增大&#xff0c;传统的文件传输软件如FTP、HTTP、SMB、NFS等已…

pycharm中py文件设置参数

在py文件中右键 直接对应复制进去即可

sql35(Leetcode1204最后一个能进入巴士的人)

代码&#xff1a; from t1,t2 自连接 两两组合 group by having 求和 选出<1000的项 # Write your MySQL query statement below select a.person_name from Queue a, Queue b where a.turn>b.turn group by a.person_id having sum(b.weight)<1000 order by a.t…

Android:The emulator process for AVD Pixel_2_API_29 was killed

The emulator process for AVD Pixel_2_API_29 was killed 报错描述&#xff1a; 第一次安装Android studio好不容易解决gradle启动模拟器又出现了以下错误 The emulator process for AVD Pixel_2_API_29 was killed原因一&#xff1a; 需要安装Intel x86 Emulator Acceleer…

开启AI时代产品管理新篇章——写给产品经理的一本跨界书

在数字化时代&#xff0c;产品经理的角色和能力要求不断演变。徐修建所著的《搜广推策略产品经理——互联网大厂搜索广告推荐案例》恰逢其时&#xff0c;为新时代的产品经理提供了宝贵的指南。 首先&#xff0c;它通过通俗易懂的语言和生动案例&#xff0c;成功揭示了互联网大厂…

Linux-----find命令

一、find命令 find介绍&#xff1a;    find是可以通过文件名称、类型、大小、权限属性、时间戳等条件在指定目录下查找对应文件或者目录的工具&#xff1b;还可以配合相关命令对匹配到的文件作出后续处理。 二、工作原理及特点 find在查找文件时会遍历指定的目录&#xff…

基于conda环境使用mamba/conda安装配置QIIME 2 2023.9 Amplicon扩增子分析环境,q2cli主要功能模块介绍及使用

QIIME 2 2023.9 Amplicon Distribution介绍&#xff1a; 概述 qiime团队专门针对高通量扩增子序列分析退出的conda集成环境&#xff0c;包括了主要和常见的扩增子分析模块&#xff0c;用户可以单独使用各个模块&#xff0c;也可以使用各模块组成不同的分析流程。从2023.09版本…

外汇天眼:掌握这个技巧,你也能成为交易高手

在金融市场这个大潮中&#xff0c;外汇交易因其高杠杆、24小时交易等特点吸引着无数交易者。然而成功的交易并非易事&#xff0c;对于投资者来说&#xff0c;外汇交易市场是一个复杂且多变的市场&#xff0c;要在外汇市场中获得成功就需要扎实的外汇金融基础知识和独特的策略&a…

RocketMQ - Spring Cloud Alibaba RocketMQ

Spring Cloud Stream是Spring Cloud体系内的一个框架&#xff0c;用于构建与共享消息传递系统连接的高度可伸缩的事件驱动微服务&#xff0c;其目的是简化消息业务在Spring Cloud应用中的开发。 Spring Cloud Stream的架构图如下所示&#xff0c;应用程序通过Spring Cloud Str…

论文阅读《Domain Generalized Stereo Matching via Hierarchical Visual Transformation》

论文地址&#xff1a;https://openaccess.thecvf.com/content/CVPR2023/html/Chang_Domain_Generalized_Stereo_Matching_via_Hierarchical_Visual_Transformation_CVPR_2023_paper.html 概述 立体匹配模型是近年来的研究热点。但是&#xff0c;现有的方法过分依赖特定数据集上…

五年制专转本备考冲刺阶段,老师给你六点建议助你上岸

1、热衷的不是学习&#xff0c;而是思考 人与人之间最大的差别在于思维的差别&#xff0c;也可以说是思考的差别。专转本也是如此&#xff0c;有人思考得简单&#xff0c;有人思考得复杂&#xff1b;有人想得全面&#xff0c;有人想得肤浅。 只有善于思考&#xff0c;才会对问…

100:ReconFusion: 3D Reconstruction with Diffusion Priors

简介 官网 少样本重建必然导致nerf失败&#xff0c;论文提出使用diffusion模型来解决这一问题。从上图不难看出&#xff0c;论文一步步提升视角数量&#xff0c;逐步与Zip-NeRF对比。 实现流程 Diffusion Model for Novel View Synthesis 给定一组输入图像 x o b s { x i…

Jmeter beanshell编程实例

1、引言 BeanShell是一种小型的&#xff0c;免费的&#xff0c;可嵌入的符合Java语法规范的源代码解释器&#xff0c;具有对象脚本语言特性。 在Jmeter实践中&#xff0c;由于BeanShell组件较高的自由度&#xff0c;通常被用来处理较为复杂&#xff0c;其它组件难以处理的问题…

c语言:文件操作(1)

前言&#xff1a;为什么要使用文件 使用文件可以让程序在不同运行之间保存和读取数据。这样可以实现持久化存储&#xff0c;即使程序关闭后数据也不会丢失。文件也可以用于数据交换&#xff0c;允许不同程序之间共享信息。在 C 语言中&#xff0c;文件还可以用于读取配置信息&…

系统架构设计师教程(三)信息系统基础知识

信息系统基础知识 3.1 信息系统概述3.1.1 信息系统的定义3.1.2 信息系统的发展3.1.3 信息系统的分类3.1.4 信息系统的生命周期3.1.5 信息系统建设原则3.1.6 信息系统开发方法 3.2 业务处理系统 (TPS)3.2.1 业务处理系统的概念3.2.2 业务处理系统的功能3.2.3 业务处理系统的特点…

Python:核心知识点整理大全13-笔记

目录 6.4.3 在字典中存储字典 6.5 小结 第7章 用户输入和while循环 7.1 函数 input()的工作原理 7.1.1 编写清晰的程序 7.1.2 使用 int()来获取数值输入 7.1.3 求模运算符 7.1.4 在 Python 2.7 中获取输入 7.2 while 循环简介 7.2.1 使用 while 循环 往期快速传送门…