当前位置: 首页 > news >正文

vue2 web 多标签输入框 elinput是否当前焦点

又来分享一点点工作积累及解决方案

产品中需要用户输入一些文字后按下回车键生成标签来显示在页面上,经过尝试与改造完成如下:

<template><div class="tags-view" @click="beginInput"><el-tag :key="index" v-for="(tag, index) in dynamicTags" closable :disable-transitions="false"@close="handleClose(index)">{{ tag }}</el-tag><el-input v-if="inputVisible" class="input-new-tag" style="width: 100%;" v-model="inputValue" ref="saveTagInput"size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input><!-- <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button> --></div>
</template><script>
export default {name: 'inputTag',props: {tags: {type: Array,default: []},},watch: {tags: {deep: true,immediate: true,handler(val) {this.dynamicTags = val || []}}},data() {return {dynamicTags: [],inputVisible: false,inputValue: ''};},methods: {handleClose(index) {this.dynamicTags.splice(index, 1);},showInput() {this.inputVisible = true;this.$nextTick(_ => {this.$refs.saveTagInput.$refs.input.focus();});},beginInput() {this.showInput();},handleInputConfirm() {let inputValue = this.inputValue;if (inputValue) {this.dynamicTags.push(inputValue);}const inputElement = this.$refs.saveTagInput.$refs.input; // 获取input DOM元素const isFocused = document.activeElement === inputElement; // 判断是否为当前焦点this.inputVisible = isFocused;this.inputValue = '';this.$emit('changed', this.dynamicTags)}}
}
</script><style lang="scss" scoped>
.tags-view {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;flex-wrap: wrap;min-height: 32px;padding: 4px 5px;border: 1px solid #DCDFE6;border-radius: 4px;
}.button-new-tag {margin-left: 10px;height: 24px;line-height: 24px;padding-top: 0;padding-bottom: 0;
}.input-new-tag {height: 24px;line-height: 24px;width: 90px;//margin-left: 10px;vertical-align: bottom;
}::v-deep {.el-tag {margin-left: 5px;margin-top: 2px;margin-bottom: 2px;}.el-input__inner {height: 24px;line-height: 24px;border: none;padding: 0px 5px;}
}
</style>

组件的使用:

import InputTag from '../components/inputTag.vue'

tags用于默认值的回调,changed事件用于组件数据发生变化时的回调通知。 

<InputTag class="w-100" :tags="tagsValue" @changed="tagsChanged"></InputTag>

组件本身也比较简单,没有啥值得去细分和品评的技术点

enter事件和blur事件走了同一个事件,会导致输入不连续,为解决这个问题,我们只需要判断当前input是不是焦点,如果是,则不隐藏输入框即可,如下isFoucsed变量的判断即为是否本身自己是当前焦点的input!

handleInputConfirm() {let inputValue = this.inputValue;if (inputValue) {this.dynamicTags.push(inputValue);}const inputElement = this.$refs.saveTagInput.$refs.input; // 获取input DOM元素const isFocused = document.activeElement === inputElement; // 判断是否为当前焦点this.inputVisible = isFocused;this.inputValue = '';this.$emit('changed', this.dynamicTags)
}

相关文章:

vue2 web 多标签输入框 elinput是否当前焦点

又来分享一点点工作积累及解决方案 产品中需要用户输入一些文字后按下回车键生成标签来显示在页面上&#xff0c;经过尝试与改造完成如下&#xff1a; <template><div class"tags-view" click"beginInput"><el-tag :key"index" …...

32单片机综合应用案例——物联网(IoT)环境监测站(四)(内附详细代码讲解!!!)

无论你身处何种困境&#xff0c;都要坚持下去&#xff0c;因为勇气和毅力是成功的基石。不要害怕失败&#xff0c;因为失败并不代表终结&#xff0c;而是为了成长和进步。相信自己的能力&#xff0c;相信自己的潜力&#xff0c;相信自己可以克服一切困难。成功需要付出努力和坚…...

LabVIEW与WPS文件格式的兼容性

LabVIEW 本身并不原生支持将文件直接保存为 WPS 格式&#xff08;如 WPS 文档或表格&#xff09;。然而&#xff0c;可以通过几种间接的方式实现这一目标&#xff0c;确保您能将 LabVIEW 中的数据或报告转换为 WPS 可兼容的格式。以下是几种常见的解决方案&#xff1a; ​ 导出…...

小结: 路由协议的演进和分类

路由协议的演进和分类&#xff0c;包括其发展历史及主要应用场景。路由协议用于在网络中确定数据传输的最佳路径&#xff0c;主要分为内部网关协议&#xff08;IGP&#xff09;和外部网关协议&#xff08;EGP&#xff09; AS-AS 之间的。 路由协议的演进 1982年&#xff1a;出…...

OpenCV相机标定与3D重建(60)用于立体校正的函数stereoRectify()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 为已校准的立体相机的每个头计算校正变换。 cv::stereoRectify 是 OpenCV 中用于立体校正的函数&#xff0c;它基于已知的相机参数和相对位置&am…...

Android wifi列表中去自身的热点

Android wifi列表中去自身的热点 一、前言 Android wifi列表中能搜索到自身的热点wifi&#xff1f; 正常手机上都不会出现这个问题&#xff1b;可能是系统底层已经做了过滤处理。 现实开发中Android设备的Wifi能搜索到自身热点也可能会存在。 比如基于两个单独的wifi双模组硬…...

Windows环境本地配置pyspark环境详细教程

目录 一、背景简记二、本地单机spark环境配置详细步骤第一步&#xff1a;python环境安装第二步&#xff1a;安装jdk及配置环境变量安装包下载安装环境变量配置 第三步&#xff1a;安装Spark安装包下载安装配置环境变量 第四步&#xff1a;安装hadoop安装包下载安装配置环境变量…...

《自动驾驶与机器人中的SLAM技术》ch9:自动驾驶车辆的离线地图构建

目录 1 点云建图的流程 2 前端实现 2.1 前端流程 2.2 前端结果 3 后端位姿图优化与异常值剔除 3.1 两阶段优化流程 3.2 优化结果 ① 第一阶段优化结果 ② 第二阶段优化结果 4 回环检测 4.1 回环检测流程 ① 遍历第一阶段优化轨迹中的关键帧。 ② 并发计算候选回环对…...

IP属地会随着人的移动而改变吗

在当今数字化时代&#xff0c;互联网已成为人们生活中不可或缺的一部分。无论是社交媒体的日常互动&#xff0c;还是在线购物、远程工作&#xff0c;IP地址作为网络身份的重要标识&#xff0c;扮演着举足轻重的角色。随着移动互联网技术的飞速发展&#xff0c;人们越来越多地在…...

openharmony应用开发快速入门

开发准备 本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用&#xff08;如下图所示&#xff09;&#xff0c;快速了解工程目录的主要文件&#xff0c;熟悉OpenHarmony应用开发流程。 在开始之前&#xff0c;您需要了解有关OpenHarmon…...

USB3020任意波形发生器4路16位同步模拟量输出卡1MS/s频率 阿尔泰科技

信息社会的发展&#xff0c;在很大程度上取决于信息与信号处理技术的先进性。数字信号处理技术的出现改变了信息 与信号处理技术的整个面貌&#xff0c;而数据采集作为数字信号处理的必不可少的前期工作在整个数字系统中起到关键 性、乃至决定性的作用&#xff0c;其应用已经深…...

云消息队列 Kafka 版 V3 系列荣获信通院“云原生技术创新标杆案例”

2024 年 12 月 24 日&#xff0c;由中国信息通信研究院&#xff08;以下简称“中国信通院”&#xff09;主办的“2025 中国信通院深度观察报告会&#xff1a;算力互联网分论坛”&#xff0c;在北京隆重召开。本次论坛以“算力互联网 新质生产力”为主题&#xff0c;全面展示中国…...

linux下的NFS和FTP部署

目录 NFS应用场景架构通信原理部署权限认证Kerberos5其他认证方式 命令serverclient查看测试系统重启后自动挂载 NFS 共享 高可用实现 FTP对比一些ftp服务器1. **vsftpd (Very Secure FTP Daemon)**2. **ProFTPD (Professional FTP Daemon)**3. **Pure-FTPd**4. **WU-FTPD (Was…...

JS Clipboard API

1.作用 在web应用程序中&#xff0c;当用户授予了相应的权限&#xff0c;Clipboard API 就能实现系统剪切板的复制、粘贴和剪切功能。系统剪切板暴露在Navigator.clipboard 中。 2.例子 window.onload () > {// 监听用户的复制事件document.addEventListener(copy, (e) …...

MySQL中大量数据优化方案

文章目录 1 大量数据优化1.1 引言1.2 评估表数据体量1.2.1 表容量1.2.2 磁盘空间1.2.3 实例容量 1.3 出现问题的原因1.4 解决问题1.4.1 数据表分区1.4.1.1 简介1.4.1.2 分区限制和执行计划1.4.1.3 分区表的索引1.4.1.4 为什么分区键必须是主键的一部分1.4.1.5 操作分区1.4.1.5.…...

重拾Python学习,先从把python删除开始。。。

自己折腾就是不行啊&#xff0c;屡战屡败&#xff0c;最近终于找到前辈教我 第一步 删除Python 先把前阵子折腾的WSL和VScode删掉。还是得用spyder&#xff0c;跟matlab最像&#xff0c;也最容易入手。 从VScode上搞python&#xff0c;最后安装到appdata上&#xff0c;安装插…...

centos 安全配置基线

centos 安全配置基线 一、系统防火墙及SE系统1. 系统自带防火墙iptables&#xff08;Centos6&#xff09;基础命令查看防火墙设置使用命令查看防火墙设置使用命令清除防火墙设置防火墙策略开放指定的端口屏蔽IP 2. 系统自带防火墙firewalled&#xff08;Centos7&#xff09;基础…...

高级编程语言的基本语法在CPU的眼中是什么样的呢?

任何一门高级编程语言&#xff0c;就一定存在下面这几个语法元素 变量类型数组控制语句&#xff08;条件&#xff0c;循环&#xff09;运算符&#xff08;算术运算&#xff0c;布尔运算&#xff0c;赋值运算&#xff0c;关系运算&#xff0c;位运算&#xff09;函数 而本节探…...

Redis 性能优化:多维度技术解析与实战策略

文章目录 1 基准性能2 使用 slowlog 优化耗时命令3 big key 优化4 使用 lazy free 特性5 缩短键值对的存储长度6 设置键值的过期时间7 禁用耗时长的查询命令8 使用 Pipeline 批量操作数据9 避免大量数据同时失效10 客户端使用优化11 限制 Redis 内存大小12 使用物理机而非虚拟机…...

.netframwork模拟启动webapi服务并编写对应api接口

在.NET Framework环境中模拟启动Web服务&#xff0c;可以使用几种不同的方法。一个常见的选择是利用HttpListener类来创建一个简单的HTTP服务器&#xff0c;或者使用Owin/Katana库来自托管ASP.NET Web API或MVC应用。下面简要介绍Owin/Katana示例代码。这种方法更加灵活&#x…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...