title可修改点击展示input

news2024/9/24 15:27:33
     <span
                    v-if="isEdit"
                    @click.stop="headerClick(activityForm.activityName)"
                  >
                  <span>課程名稱{{ activityForm.activityName}}</span>
                  <el-button
                    link
                    type="primary"
                    style="color: #1d2129"
                    @click="editCourseName"
                  >
                    <el-icon>
                      <EditPen />
                    </el-icon>
                  </el-button>
                  </span>
                  <el-input
                    @blur.stop="
                      ($event) =>
                        handleInputBlur($event, activityForm.activityName)
                    "
                    placeholder="请输入"
                    v-else
                    ref="clickRef"
                    v-model.trim="activityForm.activityName"
                    style="width: 200px"
                  >
                  </el-input>
const { proxy } = getCurrentInstance();
const activityForm = reactive({
activityName:"
}
const isEdit = ref(true);
//点击添加内训名称
const headerClick = (item) => {
  activityForm.activityName = item;
  isEdit.value = false;
  nextTick(() => {
    proxy.$refs.clickRef && proxy.$refs.clickRef.focus(); // 获取输入框,自动获取焦点
  });
};
const handleInputBlur = (event, data) => {
  const inputName = event.target.value.trim();
  if (inputName === data) {
    isEdit.value = true;
  } else {
    isEdit.value = true;
    activityForm.activityName = inputName;
  }
};

在这里插入图片描述

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

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

相关文章

STM32存储左右互搏 QSPI总线读写64 Mbit容量SRAM VTI7064

STM32存储左右互搏 QSPI总线读写64 Mbit容量SRAM VTI7064 QSPI&#xff08;Quad-SPI&#xff09;设备有两种常见操作模式&#xff0c;一种QSPI设备上电后直接进入QSPI模式&#xff0c;操作时命令&#xff0c;地址和数据都是多线传输。另一种QSPI设备上电后进入常规SPI操作模式…

谷粒商城实战笔记-踩坑-跨域问题

一&#xff0c;When allowCredentials is true, allowedOrigins cannot contain the special value “*” since that cannot be set on the “Access-Control-Allow-Origin” response header. To allow credentials to a set of origins, list them explicitly or consider u…

shell-awk文本处理工具

1、awk概述 AWK 是一种处理文本文件的语言&#xff0c;是一个强大的文本分析工具。 它是专门为文本处理设计的编程语言&#xff0c;也是行处理软件&#xff0c;通常用于扫描、过滤、统计汇总工作 数据可以来自标准输入也可以是管道或文件 在 linux 上常用的是 gawk,awk …

PyTorch+AlexNet代码实训

参考文章&#xff1a;https://blog.csdn.net/red_stone1/article/details/122974771 数据集&#xff1a; 打标签&#xff1a; import os# os.path.join: 每个参数都是一个路径段&#xff0c;将它们连接起来形成有效的路径名。 train_txt_path os.path.join("data"…

Bazaar v1.4.3 任意文件读取漏洞复现(CVE-2024-40348)

0x01 产品简介 Bazarr是Sonarr和Radarr的配套应用程序&#xff0c;可根据您的要求管理和下载字幕。 0x02 漏洞概述 Bazarr存在任意文件读取漏洞&#xff0c;该漏洞是由于Bazaar v1.4.3的组件/api/swaggerui/static中存在一个问题&#xff0c;允许未经身份验证的攻击者可利用…

硅纪元AI应用推荐 | 豆包整容成了浏览器,让你的电脑秒变AI PC

“硅纪元AI应用推荐”栏目&#xff0c;为您精选最新、最实用的人工智能应用&#xff0c;无论您是AI发烧友还是新手&#xff0c;都能在这里找到提升生活和工作的利器。与我们一起探索AI的无限可能&#xff0c;开启智慧新时代&#xff01; 亲爱的技术宅们、办公高手们&#xff0c…

Tomcat项目本地部署

今天来分享一下如何于本机上在不适用idea等辅助工具的前提下&#xff0c;部署多个tomcat的web项目 我这里以我最近写的SSM项目哈米音乐为例&#xff0c;简单介绍一下项目的大致组成&#xff1a; 首先&#xff0c;项目分为4个模块&#xff0c;如下图所示&#xff1a; 其中&…

SQL 语句中的字符串有单引号导致报错的解决

1.问题 SQL 语句执行对象中&#xff0c;本内容的字符串内含有单引号导致查询或插入数据库报错&#xff0c; 例如 str 关键字 AND 附近有语法错误 2.解决 字符串中的 ’ → 替换 ”&#xff0c;则查询语句成功&#xff0c;故程式中要备注替换 单引号。

无法解析插件 org.apache.maven.plugins:maven-war-plugin:3.2.3(已解决)

文章目录 1、问题出现的背景2、解决方法 1、问题出现的背景 最开始我想把springboot项目转为javaweb项目&#xff0c;然后我点击下面这个插件 就转为javaweb项目了&#xff0c;但是我后悔了&#xff0c;想要还原成springboot项目&#xff0c;点开项目结构关于web的都移除了&am…

运放-增益带宽积-datasheet参数

在运放开环增益频率曲线中&#xff0c;在一定频率范围内&#xff0c;运放的开环增益与对应的频率乘积为常数&#xff1a;增益带宽积&#xff08;Gain Bandwidth Product&#xff0c; GBP 或者 GBW&#xff09;&#xff0c;即开环增益*频率增益带宽积。 这里有一个误区&#xf…

CompletableFuture异步线程不执行,卡死问题

1、生产上突然发现大量业务数据没执行&#xff0c;通过日志分析有段代码没执行。 2、分析原因可能是异步线程没执行导致&#xff0c;直接上代码场景 3、异步线程调用远程外部接口 超时或多次异常&#xff0c;导致服务无法再开启异步线程&#xff0c;同时代码中其他用到异步线程…

人人可学的AI与高科技普及视频课,零基础,通俗易懂,深入浅出

课程内容&#xff1a; 1 第0课:开课词&#xff0c;欢迎词 ev.mp4 2 第1课:我们为什么要学习Al ev.mp4 3 第2课:AI算法模型的基本概念MOVev,mp4 4 第3课:什么是生成性Al ev,mp4 5 第4课:人工智能的三驾马车 ev.mp4 6 加餐附加课1-谷歌双子座Gemini ev,mp4 7 第5课:关于Al…

为什么idea建议使用“+”拼接字符串

今天在敲代码的时候&#xff0c;无意间看到这样一个提示&#xff1a; 英文不太好&#xff0c;先问问ChatGPT&#xff0c;这个啥意思&#xff1f; IDEA 提示你&#xff0c;可以将代码中的 StringBuilder 替换为简单的字符串连接方式。 提示信息中说明了使用 StringBuilder 进行…

分布式相关理论详解

目录 1.绪论 2.什么是分布式系统&#xff0c;和集群的区别 3.CAP理论 3.1 什么是CAP理论 3.2 一致性 3.2.1 计算机的一致性说明 1.事务中的一致性 2.并发场景下的一致性 3.分布式场景下的一致性 3.2.2 一致性分类 3.2.3 强一致性 1.线性一致性 a) 定义 a) Raft算法…

数据危机!4大硬盘数据恢复工具,教你如何正确挽回珍贵记忆!

在这个数字化的时代&#xff0c;硬盘里的数据对我们来说简直太重要了。但糟糕的是&#xff0c;数据丢失这种事时不时就会发生&#xff0c;可能是因为不小心删了&#xff0c;硬盘坏了&#xff0c;或者中了病毒。遇到这种情况&#xff0c;很多人可能就慌了&#xff0c;不知道怎么…

鸿蒙(HarmonyOS)下拉选择控件

一、操作环境 操作系统: Windows 11 专业版、IDE:DevEco Studio 3.1.1 Release、SDK:HarmonyOS 3.1.0&#xff08;API 9&#xff09; 二、效果图 三、代码 SelectPVComponent.ets Component export default struct SelectPVComponent {Link selection: SelectOption[]priva…

模拟信号介绍

定义&#xff1a; 模拟信号是指用连续变化的物理量表示的信息&#xff0c;其信号的幅度、频率或相位随时间作连续变化&#xff0c;或在一段连续的时间间隔内&#xff0c;其代表信息的特征量可以在任意瞬间呈现为任意数值的信号。我们通常又把模拟信号称为连续信号&#xff0c;它…

挑战房市预测领头羊:KNN vs. 决策树 vs. 线性回归

挑战房市预测领头羊&#xff08;KNN&#xff0c;决策树&#xff0c;线性回归&#xff09; 1. 介绍1.1 K最近邻&#xff08;KNN&#xff09;&#xff1a;与邻居的友谊1.1.1 KNN的基础1.1.2 KNN的运作机制1.1.3 KNN的优缺点 1.2 决策树&#xff1a;解码房价的逻辑树1.2.1 决策树的…

AttributeError: ‘list‘ object has no attribute ‘text‘

AttributeError: ‘list‘ object has no attribute ‘text‘ 目录 AttributeError: ‘list‘ object has no attribute ‘text‘ 【常见模块错误】 【解决方案】 示例代码 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英…

前端三大主流框架Vue React Angular有何不同?

前端主流框架&#xff0c;Vue React Angular&#xff0c;大家可能都经常在使用&#xff0c;Vue React&#xff0c;国内用的较多&#xff0c;Angualr相对用的少一点。但是大家有思考过这三大框架的不同吗&#xff1f; 一、项目的选型上 中小型项目&#xff1a;Vue2、React居多…