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是否当前焦点
又来分享一点点工作积累及解决方案 产品中需要用户输入一些文字后按下回车键生成标签来显示在页面上,经过尝试与改造完成如下: <template><div class"tags-view" click"beginInput"><el-tag :key"index" …...
32单片机综合应用案例——物联网(IoT)环境监测站(四)(内附详细代码讲解!!!)
无论你身处何种困境,都要坚持下去,因为勇气和毅力是成功的基石。不要害怕失败,因为失败并不代表终结,而是为了成长和进步。相信自己的能力,相信自己的潜力,相信自己可以克服一切困难。成功需要付出努力和坚…...
LabVIEW与WPS文件格式的兼容性
LabVIEW 本身并不原生支持将文件直接保存为 WPS 格式(如 WPS 文档或表格)。然而,可以通过几种间接的方式实现这一目标,确保您能将 LabVIEW 中的数据或报告转换为 WPS 可兼容的格式。以下是几种常见的解决方案: 导出…...
小结: 路由协议的演进和分类
路由协议的演进和分类,包括其发展历史及主要应用场景。路由协议用于在网络中确定数据传输的最佳路径,主要分为内部网关协议(IGP)和外部网关协议(EGP) AS-AS 之间的。 路由协议的演进 1982年:出…...
OpenCV相机标定与3D重建(60)用于立体校正的函数stereoRectify()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 为已校准的立体相机的每个头计算校正变换。 cv::stereoRectify 是 OpenCV 中用于立体校正的函数,它基于已知的相机参数和相对位置&am…...
Android wifi列表中去自身的热点
Android wifi列表中去自身的热点 一、前言 Android wifi列表中能搜索到自身的热点wifi? 正常手机上都不会出现这个问题;可能是系统底层已经做了过滤处理。 现实开发中Android设备的Wifi能搜索到自身热点也可能会存在。 比如基于两个单独的wifi双模组硬…...
Windows环境本地配置pyspark环境详细教程
目录 一、背景简记二、本地单机spark环境配置详细步骤第一步:python环境安装第二步:安装jdk及配置环境变量安装包下载安装环境变量配置 第三步:安装Spark安装包下载安装配置环境变量 第四步:安装hadoop安装包下载安装配置环境变量…...
《自动驾驶与机器人中的SLAM技术》ch9:自动驾驶车辆的离线地图构建
目录 1 点云建图的流程 2 前端实现 2.1 前端流程 2.2 前端结果 3 后端位姿图优化与异常值剔除 3.1 两阶段优化流程 3.2 优化结果 ① 第一阶段优化结果 ② 第二阶段优化结果 4 回环检测 4.1 回环检测流程 ① 遍历第一阶段优化轨迹中的关键帧。 ② 并发计算候选回环对…...
IP属地会随着人的移动而改变吗
在当今数字化时代,互联网已成为人们生活中不可或缺的一部分。无论是社交媒体的日常互动,还是在线购物、远程工作,IP地址作为网络身份的重要标识,扮演着举足轻重的角色。随着移动互联网技术的飞速发展,人们越来越多地在…...
openharmony应用开发快速入门
开发准备 本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用(如下图所示),快速了解工程目录的主要文件,熟悉OpenHarmony应用开发流程。 在开始之前,您需要了解有关OpenHarmon…...
USB3020任意波形发生器4路16位同步模拟量输出卡1MS/s频率 阿尔泰科技
信息社会的发展,在很大程度上取决于信息与信号处理技术的先进性。数字信号处理技术的出现改变了信息 与信号处理技术的整个面貌,而数据采集作为数字信号处理的必不可少的前期工作在整个数字系统中起到关键 性、乃至决定性的作用,其应用已经深…...
云消息队列 Kafka 版 V3 系列荣获信通院“云原生技术创新标杆案例”
2024 年 12 月 24 日,由中国信息通信研究院(以下简称“中国信通院”)主办的“2025 中国信通院深度观察报告会:算力互联网分论坛”,在北京隆重召开。本次论坛以“算力互联网 新质生产力”为主题,全面展示中国…...
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应用程序中,当用户授予了相应的权限,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删除开始。。。
自己折腾就是不行啊,屡战屡败,最近终于找到前辈教我 第一步 删除Python 先把前阵子折腾的WSL和VScode删掉。还是得用spyder,跟matlab最像,也最容易入手。 从VScode上搞python,最后安装到appdata上,安装插…...
centos 安全配置基线
centos 安全配置基线 一、系统防火墙及SE系统1. 系统自带防火墙iptables(Centos6)基础命令查看防火墙设置使用命令查看防火墙设置使用命令清除防火墙设置防火墙策略开放指定的端口屏蔽IP 2. 系统自带防火墙firewalled(Centos7)基础…...
高级编程语言的基本语法在CPU的眼中是什么样的呢?
任何一门高级编程语言,就一定存在下面这几个语法元素 变量类型数组控制语句(条件,循环)运算符(算术运算,布尔运算,赋值运算,关系运算,位运算)函数 而本节探…...
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服务,可以使用几种不同的方法。一个常见的选择是利用HttpListener类来创建一个简单的HTTP服务器,或者使用Owin/Katana库来自托管ASP.NET Web API或MVC应用。下面简要介绍Owin/Katana示例代码。这种方法更加灵活&#x…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...
代码规范和架构【立芯理论一】(2025.06.08)
1、代码规范的目标 代码简洁精炼、美观,可持续性好高效率高复用,可移植性好高内聚,低耦合没有冗余规范性,代码有规可循,可以看出自己当时的思考过程特殊排版,特殊语法,特殊指令,必须…...
