Element Plus el-select选择框失去焦点blur

news2024/11/19 15:22:25

在这里插入图片描述
正常情况下,可以使用 el-select 自带的方法 blur 事件来使select失去焦点

示例:

<el-select v-model="value" ref="selectRef">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
<script setup lang="ts">
import { ref } from 'vue';

const selectRef = ref()

//清除select聚焦
const clearSelectFoucs = ()=>{
	selectRef.value.blur()
}
</script>

某些特殊情况下,直接调用 blur 事件会不生效,可以采用以下方法:

<script setup lang="ts">
import { ref, nextTick } from 'vue';
const selectRef = ref()

//方法一
const clearSelectFoucs = ()=>{
 	nextTick(()=>{
		selectRef.value.blur()
	})
}

//方法二
const clearSelectFoucs = ()=>{
	//先让选择框聚焦 再间隔执行失焦 blur 事件
 	selectRef.value.focus()
 	setTimeout(() => {
      selectRef.value.blur();
    }, 200);
}
</script>

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

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

相关文章

SQL sever中的存储过程

在Oracle的专篇中我也有仔细总结了存储过程的相关内容&#xff0c; 文章链接&#xff1a;http://t.csdnimg.cn/Z8AnH 尽管Oracle和SQL sever之间是存在一些区别&#xff0c;但许多基本的概念和原则在Oracle和SQL Server之间是通用的。它们之间有一些常见的区别&#xff0c;如下…

毅速科普课堂丨3D打印随形水路模具制造的一般流程

随形水路模具因其能大幅度提升冷却效率、缩短冷却时间、提升产品良率、提高生产效率的特点受到广泛应用&#xff0c;通常一件3D打印随形水路模具的制造需要经过多个步骤&#xff0c;包括设计、打印、后处理等多个环节&#xff0c;以确保模具的质量和性能符合预期需求。 首先&am…

分型+预后模型多层面验证,干湿结合直达7+

今天给同学们分享一篇铜死亡分型预后模型实验的生信文章“Construction and validation of a cuproptosis-related prognostic model for glioblastoma”&#xff0c;这篇文章于2023年2月6日发表在Front Immunol期刊上&#xff0c;影响因子为7.3。 铜死亡是一种新报道的程序性细…

【大模型AIGC系列课程 3-8】AI 代理的应用

1. 如果有一群角色(AI Agent)会发生什么? Generative Agents: Interactive Simulacra of Human Behavior Paper: https://arxiv.org/abs/2304.03442 Demo: https://reverie.herokuapp.com/arXiv_Demo/ 我们的生成式代理架构。代理感知(Perceive)其环境(Env),所有感知都…

网络协议--RARP:逆地址解析协议

5.1 引言 具有本地磁盘的系统引导时&#xff0c;一般是从磁盘上的配置文件中读取IP地址。但是无盘机&#xff0c;如X终端或无盘工作站&#xff0c;则需要采用其他方法来获得IP地址。 网络上的每个系统都具有唯一的硬件地址&#xff0c;它是由网络接口生产厂家配置的。无盘系统…

IDEA | 快速解决java.net.BindException Address already in use Cannot bind

最近在调试TCP/IP网络编程时&#xff0c;经常会遇到如下异常 这是由于程序异常关闭导致的端口 被 异常关闭的僵尸程序所占用 解决方案&#xff1a; 在命令行中输入 netstat -ano|findstr 端口号 ————查询到占用端口号的进程 根据端口号强制杀死占用该端口号的僵尸程序 t…

SpringCloud之Nacos配置中心解读

目录 基本介绍 概述 动态配置服务 多配置格式编辑器 微服务拉取配置流程 Data ID RefreshScope 配置共享的优先级 实战使用 简单的共享配置 开发环境的共享配置 环境隔离-命名空间Namespace 业务隔离-Group分组 基本介绍 概述 Nacos除了可以做注册中心&#x…

怎样找外企/远程的工作

“如果你既不想卷&#xff0c;又不想参与职场的勾心斗角&#xff0c;也不算行业大牛&#xff0c;还不愿意冒太高风险&#xff0c;那还有一种渠道&#xff0c;就是找海外公司的远程工作&#xff0c;比如我有几个程序员朋友&#xff0c;都是拿着硅谷动辄 20w 刀的薪水&#xff0c…

【标准化封装 SOT系列 】 E SOT-89

〇、SOT-89 这个封装也比较常见&#xff0c;但并不易错。 一、E部分 SOT-89 参数 pin-pin 间距1.5mm body size 4.52.5 二、符合当前标准的典型举例 名称pin 数厂家 body DE矩形 (mm)SOT-894Mini-Circuits – PGA-102 — 4.39/4.62.29/2.59 上图 MiniCircuits 也称DF78…

数据结构和算法——用C语言实现所有树形结构及相关算法

文章目录 前言树和森林基础概念二叉树二叉树的遍历二叉树的构造树和森林与二叉树之间的转化树和森林的遍历 满二叉树完全二叉树线索二叉树线索二叉树的构造寻找前驱和后继线索二叉树的遍历 最优二叉树&#xff08;哈夫曼树&#xff09;哈夫曼树的构造哈夫曼编码 二叉排序树&…

16.2 ARP 主机探测技术

ARP &#xff08;Address Resolution Protocol&#xff0c;地址解析协议&#xff09;&#xff0c;是一种用于将 IP 地址转换为物理地址&#xff08;MAC地址&#xff09;的协议。它在 TCP/IP 协议栈中处于链路层&#xff0c;为了在局域网中能够正确传输数据包而设计&#xff0c;…

C嘎嘎之类和对象上

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;掌握类的引用和定义&#xff0c;熟悉类成员函数的…

代码随想录算法训练营第二十九天丨 回溯算法part06

回溯总结 对于回溯算法&#xff0c;我们需要知道的是 回溯是递归的副产品&#xff0c;只要有递归就会有回溯&#xff0c;所有回溯法常与二叉树遍历【前中后序遍历】&#xff0c;深搜混在一起&#xff0c;原因是都涉及到的递归。 回溯法 暴力搜索&#xff0c;它的效率并不高&…

FreeRTOS入门教程(事件组概念和函数使用)

文章目录 前言一、事件组概念二、事件组和信号量&#xff0c;队列的区别三、事件组相关函数三、事件组应用示例1.等待多个事件2.任务同步 总结 前言 本篇文章将带大家学习什么是事件组以及如何使用事件组。 一、事件组概念 事件组通常是由一组位&#xff08;bits&#xff09…

CSS页面基本布局

前提回顾 1. 超文本标记语言&#xff08;HTML&#xff09;是一种标记语言&#xff0c;用来结构化我们的网页内容并赋予内容含义&#xff1b; &#xff08;超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language /ˈhaɪpətekst ˈmɑːkʌp ˈlŋɡwɪdʒ /…

Linux小技巧之awk必知必会

Linux Shell 三剑客之一&#xff0c;废话不多说直接上干货。 目录 1. 指定分隔符2.指定打印行数3.打印最后一列4.打印倒数第二列5.匹配输出6.if 判断7.统计列总数值8.时间格式转换 示例数据&#xff1a; 1. 指定分隔符 awk -F | {print $1} log.txt # awk -F | {print $1}…

STM32MP135和STM32MP157的区别

本文介绍了STMicroelectronics公司推出的两款多核处理器STM32MP135和STM32MP157之间的区别&#xff0c;包括主频、集成硬件模块数量、内存大小和电压调节模块等方面。 STMicroelectronics是一家领先的半导体解决方案提供商&#xff0c;在嵌入式系统领域有着丰富的经验。他们…

序列合并

题目描述 有两个长度为 N 的单调不降序列 A,B&#xff0c;在 A,B 中各取一个数相加可以得到 个和&#xff0c;求这 个和中最小的 个。 输入格式 第一行一个正整数 N&#xff1b; 第二行 N 个整数 1…N​。 第三行 N 个整数 1…N​。 输出格式 一行 N 个整数&#xff…

从头开始使用 KNN 进行 KNN 和 MNIST 手写数字识别的初学者指南

坦维佩努穆迪 Kaggle参考&#xff1a; MNIST Perfect 100% using kNN | Kaggle 一、说明 MNIST &#xff08;“修改后的国家标准与技术研究所”&#xff09;是事实上的计算机视觉“hello world”数据集。自 1999 年发布以来&#xff0c;这个经典的手写图像数据集一直作为分类算…

编写内联函数求解 2x²+4x+5的值,并用主函数调用该函数

动态内存分配可以根据实际需要在程序运行过程中动态地申请内存空间,这种内存空间的分配和释放是由程序员自己管理的,因此也被称为手动内存分配。 C++ 中,动态内存的分配和释放是通过 new 和 delete 操作符进行的。new 操作符用于在堆内存上为对象动态分配空间,dele…