Day13--搜索建议-自动获取焦点与防抖处理

news2025/2/26 15:12:37

1.定义如下的 UI 结构:

 我的操作:

第一次尝试:【出现轮廓】

 官方文档:

1》在search.vue中:

效果图:【还是和博主的搜索框有区别的】

 第二次尝试:【加上圆角】

官方文档:

第三次尝试 :【不要取消按钮样式】

官方文档:

 

第四次尝试:【默认的白色搜索背景改为 #C00000 的红色背景】

 我用的不是博主的方法去修改源码,而是在项目根目录下的uni.scss中去覆盖样式。

1》在uni.scss中写代码:

 2》效果图:

 ****************************** ****************************** ****************************** *****************

2.设置其实现搜索框的吸顶效果:

我的操作: 

  ****************************** ****************************** ****************************** *****************

3.定义如下的 input 事件处理函数:

 我的操作:

题外话[我当时不知道@input是什么东西?直到我去CSDN查一下]

1》

 2》

3》效果图:

 ****************************** ****************************** ****************************** *****************

4. 实现搜索框自动获取焦点

我的操作:

 

效果图:

 

**************************************************************************************************************

5.实现搜索框的防抖处理

 

 我的操作:

1》在search.vue中写代码:

 2》效果图:【总共只发三次请求。】

 

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

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

相关文章

58、ElasticSearch DSL Bucket聚合

1、聚合的分类 2、DSL实现Bucket聚合 # 集合, 1、bucket terms GET /hotel/_search { "size": 0, "aggs": { "brandAgg": { "terms": { "field": "brand", "size": 20 …

10.前端笔记-CSS-盒子模型-border和padding

页面布局的三大核心: 盒子模型浮动定位 1、盒子模型 1.1 盒子模型组成 盒子模型本质还是一个盒子,包括边框border、外边距margin、内边距padding和实际内容content 1.1.1 边框border 组成 组成:颜色border-color、边框宽度border-wid…

信息论与编码:线性分组码与性能参数

文章目录1.1 线性分组码(n,k)定义1.2 信道编码性能参数1.3基本线性分组码a.奇偶监督码b.恒比码c.汉明码1.4 差错控制类型对信道编码的要求1.5信道编码主要涉及的数学知识:有限域运算、矩阵运算1.1 线性分组码(n,k)定义 线性分组码是由 (n, k) 形式表示。编码器将一…

WEB安全技能树-安全漏洞类型-命令执行漏洞

题目类型 环境:CentOSApachePHPMySQL 题目:ping主机 考点分析 1.过滤 ; && || 等多条命令连接符; 2.过滤cat more less等文件读取命令; 解题思路 第一步 ping 127.0.0.1 看看命令是否能够正确执行 linux如果不指定-…

【Java第35期】:Bean的生命周期

作者:有只小猪飞走啦 博客地址:https://blog.csdn.net/m0_62262008?typeblog 内容:1,这篇博客要分析Bean生命周期有几个阶段? 2,每个阶段的效果是什么? 3,PostConstruct 和 PreDestroy 各自的效果是什…

如果线性变换可以模仿

🍿*★,*:.☆欢迎您/$:*.★* 🍿 正文 如何模仿一个 行为 假设这个行为是线性变换 A 通过权重w 变换为 B 假设可以通过 如下方式 模仿 A变换到B 线性变换 让 C 变换 D首先 计算A C 的距离 dx 计算 B D 的距离 dy假设 w 是通过等差求解权重的方…

(附源码)计算机毕业设计Java搬家预约系统

项目运行 环境配置: Jdk1.8 Tomcat8.5 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: Springboot mybatis Maven Vue 等等组成,B/…

Elon Musk 与开发者分享他的第一份代码评审

Elon Musk 比以往任何时候都更致力于 Twitter 2.0 的成功,与开发者分享他的第一份代码评审。 原文 https://ssaurel.medium.com/more-committed-than-ever-to-making-twitter-2-0-succeed-elon-musk-shares-his-first-code-review-a565e8df5e2f 前言 Elon Musk 也是…

第8讲:Python中列表的概念与基本使用

文章目录1.列表的概念1.什么是列表1.2.列表中元素的索引概念2.列表的简单定义3.获取列表中某个元素的索引3.1.如何获取列表中某个元素的索引3.2.各种场景获取列表中元素的索引4.使用运算符in检查列表中是否存在指定元素1.列表的概念 1.什么是列表 Python中的列表其实就是其他…

骨传导蓝牙耳机哪个品牌好,骨传导蓝牙耳机品牌推荐

在选择骨传导耳机时还不知道选择什么品牌好?下面小编就给大家推荐几款做的不错的骨传导耳机,大家要注意,在选择骨传导耳机时,还是要选择一些较大的骨传导品牌,这样无论是耳机体验还是售后服务都有保证。 1、南卡Runne…

【机器学习入门项目10例】(八):贝叶斯网络-拼写检查器

🌠 『精品学习专栏导航帖』 🐳最适合入门的100个深度学习实战项目🐳🐙【PyTorch深度学习项目实战100例目录】项目详解 + 数据集 + 完整源码🐙🐶【机器学习入门项目10例目录】项目详解 + 数据集 + 完整源码🐶🦜【机器学习项目实战10例目录】项目详解 + 数据集 +

pagination分页插件的getResult明明有数据,但是getTotal方法为0

最近把之前毕设的SSM项目改成SpringBoot项目时遇到了明明后端数据库查询到了数据,但是page的getTotal方法却是0的bug 解决办法: 先导入需要的依赖,这里注意ssm项目的依赖和SpringBoot的依赖是不一样的,这个只要导入极少启动依赖…

视频 | 扩增子文库拆分和16S序列合并

点击阅读原文跳转完整教案。基因组中的趣事(二)- 最长的基因2.7 million,最短的基因只有8 nt却能编码基因组中的趣事(一):这个基因编码98种转录本1 Linux初探,打开新世界的大门1.1 Linux系统简介…

Strimzi Kafka Bridge(桥接)实战之二:生产和发送消息

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是《Strimzi Kafka Bridge(桥接)实战之》系列的第二篇,咱们直奔bridge的重点:常用接口,用实际操作体验如何用…

27. Ubuntu 20.04 开机自动挂载文件/etc/fstab

自动挂载文件/etc/fstab1.fstab2. 参数含义3.开机自动挂载3.1 查看要挂载的磁盘UUID3.2 向fstab文件中添加不同于热插拔的设备,对于硬盘可能需要长期挂载在系统下,所以如果每次开机都去手动mount是非常痛苦的,当然Ubuntu系统的GNOME桌面自带的…

Map学习笔记——深入理解ConcurrentHashMap

ConcurrentHashMap 是我们日常开发中使用频率最高的并发容器之一了,具有如下特点: 基于JDK8分析 存储结构和HashMap一样,都是数组 链表 红黑树是线程安全的容器,底层是通过CAS自旋 sychronized 来保证的key 和 value 都不允许为空&#xf…

【华为OD机试真题 python】叠积木【2022 Q4 | 200分】

■ 题目描述 【叠积木】 有一堆长方体积木,它们的长度和宽度都相同,但长度不一。 小橙想把这堆积木叠成一面墙,墙的每层可以放一个积木,也可以将两个积木拼接起来,要求每层的长度相同。 若必须用完这些积木,叠成的墙最多为多少层? 如下是叠成的一面墙的图示,积木仅…

太强了,全面解析缓存应用经典问题

1、前言 随着互联网从简单的单向浏览请求,发展为基于用户个性信息的定制化以及社交化的请求,这要求产品需要做到以用户和关系为基础,对海量数据进行分析和计算。对于后端服务来说,意味着用户的每次请求都需要查询用户的个人信息和…

jdk-synchronized源码学习

synchronized介绍java中jdk1.6之前和jdk1.6及之后synchronized完全不一样。1.6之前直接上来都是重量级锁导致java的性能很低效,而1.6及之后甲骨文公司对其进行优化,通过一个锁的升级过程从而来支持一些非复杂的场景。那么本文主要是针对synchronized的源…

Java并发-ThreadLocal的使用

ThreadLocal 概述 当使用 ThreadLocal 维护变量时,ThreadLocal 为每个使用该变量的线程提供独立的变量副本,所以每一个线程都可以独立地改变自己的副本,而不会影响其它线程所对应的副本。当多个线程操作这个变量时,实际操作的是自…