【elementui】解决el-select组件失去焦点blur事件每次获取的是上一次选中值的问题
目录
【问题描述】
【问题摘要】
【分析问题】
【完整Test代码】
【封装自定义指令】
↑↑↑↑↑↑↑↑↑↑↑↑ 不想看解决问题过程的可点击上方【封装自定义指令】目录直接跳转获取结果即可~~~
【问题描述】
一位朋友遇到这么一个开发场景：在表格里面嵌入el-select组件，每次修改值后，失去焦点时将修改值提交后台保存，但是发现在el-select组件失去焦点时，blur事件的evt.target.value值总为前一次选择的值；
【问题摘要】
1、el-select组件失去焦点时需要获取组件当前值而不是上一次的值；
2、el-select组件切换选项时不提交后台，只有当组件失去焦点后才提交当前值；
【分析问题】
一刚开始以为是下拉框收起动画延时问题导致内部value值被延时修改，所以就在blur事件里延时获取evt.target.value,貌似没问题了
blurHandler(evt){setTimeout(() => {console.log(evt.target.value);},250)
},
随后又发现通过@blur绑定事件只会触发一次，好吧那就加修饰符吧：@blur.capture.native，好像解决只触发一次的问题了
<el-select v-model="value" @blur.capture.native="nativeBlurHandler" ref="select"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option>
</el-select>
但是随之而来的问题就是，每次切换取值后都会触发一次blur事件，这可不是我们想要的，这不变成change事件了吗？继续深挖！
那就打印一下this.$refs.select看看吧，找到this.$refs.select.$data, 看里面有定义啥变量没,发现了如下变量：
log(eventName){let {createdSelected,inputHovering,isOnComposition,isSilentBlur,menuVisibleOnFocus,softFocus,visible} = this.$refs.select.$data;console.table([{name: eventName,value: '',},// {// name: 'createdSelected',// value: createdSelected// },{name: 'inputHovering',value: inputHovering},// {// name: 'isOnComposition',// value: isOnComposition// },{name: 'isSilentBlur',value: isSilentBlur},// {// name: 'menuVisibleOnFocus',// value: menuVisibleOnFocus// },// {// name: 'softFocus',// value: softFocus// },{name: 'visible',value: visible},])
}
通过反复测试发现只有inputHovering，isSilentBlur，visible这三个变量与el-select组件的focus,blur事件有关联：
通过上图可以发现，只有最下方的失去焦点事件才是我们想要的，此时visible==false，isSilentBlur==true,正好满足我们的判断条件,于是blur事件改造成这样了：
nativeBlurHandler(evt){console.log('nativeBlurHandler', {...this.$refs.select});let {isSilentBlur,visible} = this.$refs.select;if( isSilentBlur && !visible ) {console.log('提交', this.$refs.select.selected.currentValue);}this.log('blur事件');
},
又因为value取值从evt.target.value获取的不是实时的，也就是值不正确，继续深挖，发现this.$refs.select.selected.currentValue就是我们想要的正确的值，于是乎，问题就解决了！测试demo完整代码如下：
【完整Test代码】
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"><el-select v-model="value" placeholder="请选择" @blur="blurHandler" @blur.capture.native="nativeBlurHandler" ref="select"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></div></body><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>let selectElm;new Vue({el: '#app',data: function() {return {options: [{value: '黄金糕',label: '黄金糕'}, {value: '双皮奶',label: '双皮奶'}, {value: '蚵仔煎',label: '蚵仔煎'}, {value: '龙须面',label: '龙须面'}, {value: '北京烤鸭',label: '北京烤鸭'}],value: ''}},methods: {focusHandler(evt){this.log('focus事件');},blurHandler(evt){setTimeout(() => {console.log(evt.target.value);},250)},nativeBlurHandler(evt){console.log('nativeBlurHandler', {...this.$refs.select});let {isSilentBlur,visible} = this.$refs.select;if( isSilentBlur && !visible ) {console.log('提交', this.$refs.select.selected.currentValue);}this.log('blur事件');},log(eventName){let {createdSelected,inputHovering,isOnComposition,isSilentBlur,menuVisibleOnFocus,softFocus,visible} = this.$refs.select.$data;console.table([{name: eventName,value: '',},// {// name: 'createdSelected',// value: createdSelected// },{name: 'inputHovering',value: inputHovering},// {// name: 'isOnComposition',// value: isOnComposition// },{name: 'isSilentBlur',value: isSilentBlur},// {// name: 'menuVisibleOnFocus',// value: menuVisibleOnFocus// },// {// name: 'softFocus',// value: softFocus// },{name: 'visible',value: visible},])}}})</script>
</html>【封装自定义指令】
想到给组件添加ref实际并不是那么好用且麻烦，所以我又将其封装成了指令，指令代码及用法如下，大家随取随用哈↓↓↓↓↓↓
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"><el-row><el-col :span="24"><el-select v-select-blur="selectBlurHandler" v-model="value"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-col></el-row></div></body><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>Vue.directive('select-blur', {bind: function(el, binding, vnode) {const selectComponent = vnode.componentInstance;if( selectComponent.$options.name === 'ElSelect' ) {selectComponent.$watch('visible', (n,o) => {const {isSilentBlur,visible,} = selectComponent;if(isSilentBlur && !visible) {selectComponent.handleBlur();}})selectComponent.$on('blur', () => {let {visible,selected: {currentValue}} = selectComponent;if (!visible) {binding?.value && typeof binding.value === 'function' && binding.value(currentValue);selectComponent.blur(); //处理页面频繁聚焦失焦导致重复触发blur事件的问题}}, true);}},unbind: function(el, binding, vnode) {const selectComponent = vnode.componentInstance;if( selectComponent.$options.name === 'ElSelect' ) {selectComponent.$off('blur');}}});const app = new Vue({el: '#app',data: function() {return {options: [{value: '黄金糕',label: '黄金糕'}, {value: '双皮奶',label: '双皮奶'}, {value: '蚵仔煎',label: '蚵仔煎'}, {value: '龙须面',label: '龙须面'}, {value: '北京烤鸭',label: '北京烤鸭'}],value: ''}},methods: {selectBlurHandler(val) {console.log('提交', val);},}})</script>
</html>相关文章：
【elementui】解决el-select组件失去焦点blur事件每次获取的是上一次选中值的问题
目录 【问题描述】 【问题摘要】 【分析问题】 【完整Test代码】 【封装自定义指令】 ↑↑↑↑↑↑↑↑↑↑↑↑ 不想看解决问题过程的可点击上方【封装自定义指令】目录直接跳转获取结果即可~~~ 【问题描述】 一位朋友遇到这么一个开发场景：在表格里面嵌入el-…...
通过了PMP考试，还有什么证书值得考？
自从7月24号公布了PMP成绩后，不少伙伴私信小编：通过PMP后还有哪些证书可以提升自己？一来是多份高含金量的证书可以多点竞争力，二来是加持自己的职业发展！今天小编就来给大家捋一捋！ 一.NPDP认证 2016 年 4…...
页面技术基础-html
页面技术基础-html 环境准备：在JDBC中项目上完成代码定义 1. 新建一个 Module:filr->右键 -》Module -》Java-》next->名字(html_day1)->finish 2. 在 Moudle上右键-》第二个选项：add framework .. -> 选择JavaEE下第一个选项 Web Apllicat…...
/lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28‘ not found
某项目中，我要给别人封装一个深度学习算法的SDK接口，运行在RK3588平台上，然后客户给我的交叉编译工具链是 然后我用他们给我的交叉编译工具链报下面的错误： aarch64-buildroot-linux-gnu-gcc --version /data/chw/aarch64/bin/cca…...
解决SVN或GIT忽略提交文件的问题
背景 使用IDEA 的SVN插件提交文件是总是会提交一些不需要提交的文件; 我们可以通过一些简单设置忽略这些文件。 git 在项目根目录新建文本文件，修改后缀为.gitignore 文件中添加内容 *.iml .project .gradle/ .idea/ target/ build/ .vscode/ .settings/ .facto…...
Django框架之路由用法
简介 路由简单的来说就是根据用户请求的 URL 链接来判断对应的处理程序，并返回处理结果，也就是 URL 与 Django 的视图建立映射关系。 Django 路由在 urls.py 配置，urls.py 中的每一条配置对应相应的处理方法。 Django 不同版本 urls.py 配…...
回文链表 LeetCode热题100
题目 给你一个单链表的头节点 head ，请你判断该链表是否为回文链表。如果是，返回 true ；否则，返回 false 。 思路 利用快慢指针找到链表中间节点，反转后半段链表。前半段从头节点开始与后半段比较。 注意当链表节点…...
如何在群晖NAS中使用cpolar内网穿透
如何在群晖nas中使用cpolar内网穿透 文章目录 如何在群晖nas中使用cpolar内网穿透 今天，我们来为大家介绍，如何在群晖系统中，使用图形化界面的cpolar。 cpolar经过图形化改造后，使用方法已经简便了很多，基本与其他应用…...
无头单向不循环链表和带头双向循环链表的创建
Lei宝啊：个人主页 愿所有美好不期而遇 前言： 接下来我们将会了解最基础的链表--->单链表 以及最方便也是最爽的链表--->带头双向循环链表。 若有看不懂之处，可画图或者借鉴这里：反转单链表，对于数据结构而言&am…...
超简单的fastapi链接websocket用例
main.py from typing import Listfrom fastapi import FastAPI, WebSocket, WebSocketDisconnectapp FastAPI()class ConnectionManager:def __init__(self):# 存放激活的ws连接对象self.active_connections: List[WebSocket] []async def connect(self, ws: WebSocket):# 等…...
MySQL详解
目录 一、MySQL 概述二、MySQL 安装和配置三、MySQL 基础语法四、MySQL 高级语法五、MySQL 性能优化六、MySQL 应用场景和实例七、MySQL 开发工具和插件八、MySQL 学习资源和社区 一、MySQL 概述 MySQL 是一种开源的关系型数据库管理系统，最初由瑞典的 MySQL AB 公…...
Vue [Day2]
指令修饰符 v-model.trim v-model.number 事件名.stop click.stop 事件名.prevent keyup.enter <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…...
【前端｜Javascript第1篇】一文搞懂Javascript的基本语法
欢迎来到JavaScript的奇妙世界！作为前端开发的基石，JavaScript为网页增色不少，赋予了静态页面活力与交互性。如果你是一名前端小白，对编程一无所知，或者只是听说过JavaScript却从未涉足过，那么你来对了地方…...
【Linux命令200例】cp用于复制文件和目录（常用）
🏆作者简介，黑夜开发者，全栈领域新星创作者✌，阿里云社区专家博主，2023年6月csdn上海赛道top4。 🏆本文已收录于专栏：Linux命令大全。 🏆本专栏我们会通过具体的系统的命令讲解加上鲜…...
C高级_第二讲_shell指令和shell脚本_递归练习
思维导图 递归实现，输入一个数，输出这个数的每一位 int funh(int num){if(0 num){return 0;}else{funh(num/10);printf("%d\n", num%10);} }int main(int argc, const char *argv[]) {puts("请输入一个数");int num 0;scanf(&quo…...
静态路由综合实验
实验拓扑如下： 实验要求如下： 【1】R6为isp，接口IP地址均为公有地址;该设备只能配置IP地址，之后不能再对其进行任何配置 【2】R1~R5为局域网，私有IP地址192.168.1.0/24，请合理分配 【3】所有路由器上环回…...
Spring核心IOC控制反转思想-----Spring框架
import org.junit.Test;public class TestPublic {Testpublic void Test(){//控制反转是一种思想,是为了提高程序扩展力降低耦合度,达到DIP(Dependency Inversion Principle依赖倒置)原则//其核心是将对象的创建权交出去,由第三方容器负责管理,将对象和对象之间的维护权交出去,…...
中小企业如何做好MES管理系统实施建设
中小企业在生产制造领域面临着诸多挑战，包括提升产品竞争力、规范生产制造等。为了应对这些挑战，越来越多的中小企业开始实施MES生产管理系统。然而，由于企业规模小、资源实力不足等原因，很多企业在实施MES管理系统时存在一定的困…...
java环境搭建 Ubuntu Linux
jdk的安装和配置环境变量 使用apt sudo apt install default-jdk若是安装成功了在终端输入java -version来查看是否安装成功 使用官网下载的jdk包 直接在百度上搜索jdk，选择图片这个 网址:jdk下载网址 若是arm就选择带有arm的，反之选择x64的&#…...
微信小程序使用mp-html遇到的问题并解决
1、在本地配置寻找勾选使用npm 查了之后发现2023了 不需要勾选了 默认使用npm 2、在微信小程序编辑器左上角的 工具-->构建npm 然后就报错了 于是搜索到以下的内容： 没有找到可以构建的NPM包，请确认需要参与构建的npm都在 miniprogramRoot 目录内 -…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
聊聊 Pulsar：Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...
HTML 列表、表格、表单
1 列表标签 作用：布局内容排列整齐的区域 列表分类：无序列表、有序列表、定义列表。 例如： 1.1 无序列表 标签：ul 嵌套 li，ul是无序列表，li是列表条目。 注意事项： ul 标签里面只能包裹 li…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求，并检查收到的响应。它以以下模式之一…...
Go 并发编程基础：通道（Channel）的使用
在 Go 中，Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式，用于在多个 Goroutine 之间传递数据，从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...