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

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

示例:

<el-select v-model="value" ref="selectRef"><el-optionv-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.hqwc.cn/news/145028.html

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

相关文章

【MySQL系列】- Select查询SQL执行过程详解

【MySQL系列】- Select查询SQL执行过程详解 文章目录 【MySQL系列】- Select查询SQL执行过程详解一、SQL查询语句的执行过程二、SQL执行过程详解2.1. 连接器2.2. 查询缓存2.3. 分析器2.4. 优化器2.5. 执行器 三、undo log 和 redo log作⽤3.1. redo log &#xff08;重做日志&a…

软件工程与计算总结(十九)软件测试

目录 ​编辑 一.引言 1.验证与确认 2.目标 3.测试用例 4.桩与驱动 5.缺陷、错误与失败 二.测试层次 1.测试层次的划分 2.单元测试 3.集成测试 4.系统测试 三.测试技术 1.测试用例的选择 2.随机测试 3.基于规格的技术&#xff08;黑盒测试&#xff09; 4.基于代…

【数据结构】面试OJ题——时间复杂度

目录 一&#xff1a;旋转数组 思路&#xff1a; 二&#xff1a;消失的数字 思路&#xff1a; 一&#xff1a;旋转数组 189. 轮转数组 - 力扣&#xff08;LeetCode&#xff09; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负…

给Windows文件夹添加备注信息

自己的电脑中文件夹为了安装各种开发环境&#xff0c;基本都是英文字母命名&#xff0c;就导致好多东西猛地一看找不着。此时加个备注会不会就好很多呢&#xff1f;就如以下这种 设置方法&#xff1a; 1、展示备注 右键展示的列表头部&#xff0c;会出现展示项&#xff0c;一…

python读写.pptx文件

1、读取PPT import pptx pptpptx.Presentation(rC:\Users\user\Documents\\2.pptx) # ppt.save(rC:\Users\user\Documents\\1.pptx) # slideppt.slides.add_slide(ppt.slide_layouts[1])# 读取所有幻灯片上的文字 for slide in ppt.slides:for shape in slide.shapes:if shape…

【OpenCV实现鼠标绘图,轨迹栏做调色板,图像的基本操作】

文章目录 鼠标绘图轨迹栏做调色板图像的基本操作 鼠标绘图 在OpenCV中操作鼠标事件 函数&#xff1a;cv.setMouseCallback() 目的是在鼠标双击的地方画一个圆。首先&#xff0c;我们需要创建一个鼠标回调函数&#xff0c;该函数会在鼠标事件发生时执行。鼠标事件包括左键按下…

pycharm使用Git拉取最新代码(配置了远程服务器)

首先分享一下如何在pycharm设置代理&#xff08;毕竟pull代码往往是从GitHub上&#xff09;。因为即便本地开启了代理&#xff0c;PyCharm并不会自动使用它。需要在PyCharm的设置中手动配置代理。 下面是在PyCharm中设置代理的步骤&#xff1a; 主菜单中选择File > Settin…

cdm解决‘ping‘ 或者nslookup不是内部或外部命令,也不是可运行的程序或批处理文件的问题

当我们在执行cmd时&#xff0c;会出现不是内部或外部命令&#xff0c;也不是可运行的程序的提示。 搜索环境变量 点开高级 >> 环境变量 打开Path&#xff0c;看是否在Path变量值中存在以下项目&#xff1a; %SystemRoot%/system32; %SystemRoot%; %SystemRoot%/Syste…

什么是卷积神经网络?解决了什么问题?

什么是卷积神经网络&#xff1f; 卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;是一种深度神经网络模型&#xff0c;主要用于图像识别、语音识别和自然语言处理等任务。它通过卷积层、池化层和全连接层来实现特征提取和分类。 解决了什么问…

Vue项目中使用Multiavatarjs生成自定义随机头像-demo

Multiavatar & vue-color-avatar 前者使用简单一点提供的有api&#xff0c;后者更类似一个项目 主要使用Multiavatar去实现随机生成头像的功能 https://github.com/multiavatar/Multiavatar/blob/main/multiavatar.js 使用很简单&#xff0c;把js下载保存到项目中&#xff…

ARM 堆栈寻址类型区分

文章目录 堆栈指向分类堆栈指向数据分类满递增与满递减空递增与空递减 堆栈指向分类 根据堆栈指针的指向的方向不同&#xff0c;可以划分为向上生成型和向下生成型。 向上生成型&#xff1a; 随着数据的入栈&#xff0c;堆栈的指针逐渐增大&#xff0c;称为&#xff1a;递增…

windows系统如何查看Linux文件系统中的图片缩略图

背景 使用autoDL云算力资源&#xff0c;没有GUI界面&#xff0c;实验结果都是图片为主&#xff0c;为了可视化查看图片&#xff0c;所以萌生了是否有软件可以查看Linux文件系统中的图片缩略图。 目前网上有几种方法可以支持在windows系统上查看Linux文件系统中的图片缩略图&a…