【工作】vant的search组件手动聚焦

背景

为了方便用户使用,第一次进来时默认输入框聚焦,但是当用户并没有输入手机号,点击按钮时,需要给一个友好提示,并且输入框重新聚集上。
在这里插入图片描述

过程

最开始以为search组件这个方法肯定已经实现了并且看官网文档上也有对应的方法。
在这里插入图片描述
心里想,这还不简单,拿到实例之后调用方法即可,但是尝试了之后,发现页面报错了,并且也没有实现理想中的效果。

<van-search
  ref="searchInput"
  :autofocus="true"
  v-model="tel"
  :maxlength="11"
  placeholder="请输入手机号"
  @input="requestGetDriverInfo"
/>
if (!this.tel) {
  Dialog.alert({
    title: '提示',
    message: '请输入手机号查询。',
    confirmButtonText: '知道了'
  })
    .then(() => {
    	this.$refs.searchInput.focus();
  })
}

直接git上找到对应版本,看了下源码,原来search并没有提供此方法。
在这里插入图片描述
那怎么办呢?
好说,那就只能调用input的focus方法了。

问题

通过ref实例拿不到el,不知道为什么,有知道为什么的小伙伴也欢迎留言评论下~

解决

既然通过ref找到search之后拿不到el,那就直接找input吧

this.$el.querySelector('.van-field__control').focus();

这样很好的实现了我想要的效果~完美~~

总结

  1. 也不能太过于依赖文档,最好还是看下源码有没有封装对应的方法供外部调用
  2. 既然没有提供,我们就找到最基本的input,调用它的方法
  3. 如果手动聚焦,记住input原生永远可以提供给你focus方法。哈哈,别灰心~

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

redis的事务、redis持久化方案、Java操作redis数据库

五、redis的事务 开启事务&#xff1a; 要等左边的提交事务&#xff0c;右边才能拿到修改后的值 本来name不能增加&#xff0c;会报错&#xff0c;但是事务中没提交不知道错 此时提交数据&#xff1a; redis事务将成功的正常提交&#xff0c;失败的才回滚&#xff0c;所以不具备…

【计算机网络】11、网桥(bridge)、集线器(hub)、交换机(switch)、路由器(router)、网关(gateway)

文章目录 一、网桥&#xff08;bridge)二、集线器&#xff08;hub&#xff09;三、交换机&#xff08;switch)四、路由器&#xff08;router&#xff09;五、网关&#xff08;gateway&#xff09; 对于hub&#xff0c;一个包过来后&#xff0c;直接将包转发到其他口。 对于桥&…

边写代码边学习之卷积神经网络CNN

1. 卷积神经网络CNN 卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;是一种深度学习神经网络的架构&#xff0c;主要用于图像识别、图像分类和计算机视觉等任务。它是由多层神经元组成的神经网络&#xff0c;其中包含卷积层、池化层和全连接…

HCIP——前期综合实验

前期综合实验 一、实验拓扑二、实验要求三、实验思路四、实验步骤1、配置接口IP地址2、交换机配置划分vlan10以及vlan203、总部分部&#xff0c;骨干网配置OSPF分部总部骨干网 4、配置BGP建立邻居关系总部骨干网分部 5、发布用户网段6、将下一跳改为本地7、允许AS重复8、重发布…

Java中集合容器详解:简单使用与案例分析

目录 一、概览 1.1 Collection 1. Set 2. List 3. Queue 1.2 Map 二、容器中的设计模式 迭代器模式 适配器模式 三、源码分析 ArrayList 1. 概览 2. 扩容 3. 删除元素 4. 序列化 5. Fail-Fast Vector 1. 同步 2. 扩容 3. 与 ArrayList 的比较 4. 替代方案…

C#——多线程之Thread

C#——多线程之Thread 前言一、Thread是什么&#xff1f;二、各应用场景以及实例分析1.前台线程和后台线程&#xff1a;2.异步处理3.线程状态及手动销毁线程4.线程同步/等待线程完成 总结 前言 上次简单讲述了关于多线程中Task的相关应用以及场景。今天我们来看一下多线程中Th…

【LeetCode】27. 移除元素

题目大概意思是剔除nums数组中出现的所有val值。可以用快慢双指针法来做。 快的指针在前面遍历找值不为val的元素的下标&#xff0c;慢的负责接收值不为val的元素&#xff0c;并及时更新数组。 class Solution {public int removeElement(int[] nums, int val) {//快慢指针法in…

单网卡实现 双IP 双网段(内外网)同时运行

前提是内外网是同一网线连接&#xff08;双网线双网卡的具体可以自己搜索下。理论上都设置静态IP后把外网跃点设置小&#xff0c;内网跃点设置大&#xff0c;关闭自动跃点设置同一个接口跃点数&#xff0c;在通过命令提示符添加内网网址走内网网关就可以了&#xff09;。 需要使…

华为OD机试真题 JavaScript 实现【机器人活动区域】【2023Q1 200分】,附详细解题思路

目录 一、题目描述二、输入描述三、输出描述四、解题思路五、JavaScript算法源码六、效果展示1、输入2、输出 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试&am…

iOS--Runloop

Runloop概述 一般来说&#xff0c;一个线程一次只能执行一个任务&#xff0c;执行完成后线程就会退出。就比如之前学OC时使用的命令行程序&#xff0c;执行完程序就结束了。 而runloop目的就是使线程在执行完一次代码之后不会结束程序&#xff0c;而是使该线程处于一种休眠的状…

【iOS】GCD深入学习

关于GCD和队列的简单介绍请看&#xff1a;【iOS】GCD学习 本篇主要介绍GCD中的方法。 栅栏方法:dispatch_barrier_async 我们有时候需要异步执行两组操作&#xff0c;而且第一组操作执行完之后&#xff0c;才能开始执行第二组操作&#xff0c;当然操作组里也可以包含一个或者…

windows下安装anaconda、pycharm、cuda、cudnn、PyTorch-GPU版本

目录 一、anaconda安装及虚拟环境创建 1.anaconda的下载 2.Anaconda的安装 3.创建虚拟环境 3.1 环境启动 3.2 切换镜像源 3.3环境创建 3.4 激活环境 3.5删除环境 二、pycharm安装 1.pycharm下载 2.pycharm的安装 三、CUDA的安装 1.GPU版本和CUDA版本、cudnn版本、显卡…

Redis 客户端有哪些?

文章目录 JedisLettuceRedisson最佳实践 - 到底用哪个&#xff1f; Redis 最常见的 Java 客户端有两个&#xff0c;Jedis 和 Lettuce&#xff0c;高级客户端有 Redisson&#xff0c;见下图&#xff08;图源 Clients | Redis&#xff09; Jedis Github地址&#xff1a;redis/j…

JavaScript创建,写入,复制,读取文件 只限IE ActiveX控件

最近接到需求&#xff0c;需要纯前端&#xff0c; 操作写入改变文件&#xff0c;一时间头大不已&#xff0c;还好此需求只需要屏幕展示&#xff0c;无需顾及兼容问题&#xff0c;找来找去找到了new ActiveXObject(“Scripting.FileSystemObject”) 强大控件 以下为自己记录的 …

贝锐蒲公英:没有公网IP,多分支企业如何高效远程访问OA系统?

贝锐蒲公英&#xff1a;没有公网IP&#xff0c;多分支企业、移动办公人员如何高效远程访问OA系统&#xff1f; 国内某大型美妆公司&#xff0c;旗下产品覆盖美容护肤品、彩妆、美容仪器、健康食品、SPA美容会所及等多类服务&#xff0c;致力于为客户提供高品质的产品和完善的服…

Vivado进行自定义IP封装

一. 简介 本篇文章将介绍如何使用Vivado来对上篇文章(FPGA驱动SPI屏幕)中的代码进行一个IP封装&#xff0c;Vivado自带的IP核应该都使用过&#xff0c;非常方便。 这里将其封装成IP核的目的主要是为了后续项目的调用&#xff0c;否则当我新建一个项目的时候&#xff0c;我需要将…

Mycat-Balance使用指南

MyCAT Balance是一个Java NIO的高性能负载均衡器&#xff0c;可以替代普通的硬件的交换机或其LVS类似的复杂机制&#xff0c;实现MyCAT集群的负载均衡。 MyCAT Balance的配置文件在conf目录下&#xff0c;frontend-conf.为前端配置&#xff0c;包括绑定的端口等&#xff0c;js…

ODOO16运输费用摊入采购成本,总账和收发表一致?

产品的采购成本准确的计算是怎样的呢&#xff1f;在《会计准则》中有规定&#xff1a; “第三章 计量 ... 第六条 存货的采购成本&#xff0c;包括购买价款、相关税费、运输费、装卸费、保险费以及其他可归属于存货采购成本的费用。” 可见存货的采购成本包含的信息是很多&am…

图解TCP 三次握手和四次挥手的高频面试题(2023最新版)

大家好&#xff0c;最近重新整理了一版 TCP 三次握手和四次挥手的面试题&#xff08;2023最新版&#xff09;。 ----- 任 TCP 虐我千百遍&#xff0c;我仍待 TCP 如初恋。 巨巨巨巨长的提纲&#xff0c;发车&#xff01;发车&#xff01; img TCP 基本认识 TCP 头格式有哪些…

SpringBoot笔记:SpringBoot集成Dataway

文章目录 1、什么是 Dataway?2、主打场景3、技术架构4、整合SpringBoot4.1、maven 依赖4.2、初始化脚本4.3、整合 SpringBoot 5、Dataway 接口管理6、Mybatis 语法支持7、小结 1、什么是 Dataway? 官网地址&#xff1a;https://www.hasor.net/docs/guides/quickstart Da…
最新文章