vue3 在el-input的光标处插入文本

点击文本框下方的按钮,将相应的文本插入光标处的实现:

<el-input type="textarea" rows="4" v-model="formula" @blur="handleBlur" clearable></el-input><el-button-group class="short_btn"><el-button type="primary" plain @click="appendFormula('+')">+</el-button><el-button type="primary" plain @click="appendFormula('-')">-</el-button><el-button type="primary" plain @click="appendFormula('*')">*</el-button><el-button type="primary" plain @click="appendFormula('/')">/</el-button><el-button type="primary" plain @click="appendFormula('(')">(</el-button><el-button type="primary" plain @click="appendFormula(')')">)</el-button></el-button-group>
const cursorPos = ref(); // 光标位置
const handleBlur = (e:any)=>{cursorPos.value = e.srcElement.selectionStart;
};
const appendFormula = (str: any ) => {if (!formula.value) {formula = str;} else {const start = formula.value.substring(0, cursorPos.value);const end =formula.value.substring(cursorPos.value);formula.value = `${start}${str}${end}`;}
};

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

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

相关文章

63、基于深度学习网络的数字分类(matlab)

1、基于深度学习网络的数字分类的原理及流程 基于深度学习网络的数字分类是一种常见的机器学习任务&#xff0c;通常使用的是卷积神经网络&#xff08;CNN&#xff09;来实现。下面是其原理及流程的简要说明&#xff1a; 数据收集&#xff1a;首先&#xff0c;需要收集包含数字…

华为高斯数据库安装

这里主要在虚拟机上安装&#xff0c;选择openEuler系统。已经有很多博文介绍了虚拟机安装&#xff0c;直接推荐博文。 OpenEulerx虚拟机中安装 openEuler添加VMware-tools 数据库的安装也有详细博文推荐 OpenGauss数据库的详细安装 借花献佛&#xff0c;大家努力

【shell script】

文章目录 一、基础shell script二、脚本运行方式的差异三、判断式1.利用test命令2.利用判断符号[] 四、if&#xff0c;case语句1.if...then2.case...esac 五、函数function六、循环1.while和until循环2.for循环 一、基础shell script 在“shell”部分&#xff0c;那是在命令行…

【Oracle】Oracle常用语句大全

目录 创建/删除数据库创建/删除表其他表操作增加字段修改字段重命名字段删除字段 主键/索引/视图相关数据插入数据更新数据删除字段拼接merge into语法案例素材同时更新和插入记录同步错误 分页查询分组查询/筛选排序连接查询1. 内连接&#xff08;INNER JOIN&#xff09;&…

Flutter——最详细(Badge)使用教程

背景 主要常用于组件叠加上圆点提示&#xff1b; 使用场景&#xff0c;消息数量提示&#xff0c;消息红点提示 属性作用backgroundColor红点背景色smallSize设置红点大小isLabelVisible是否显示offset设置红点位置alignment设置红点位置child设置底部组件 代码块 class Badge…

从数据洞察到智慧决策:数字孪生技术在智慧水利中的应用实践,为水库管理提供强有力的数据支撑和智能分析

目录 一、引言 二、数字孪生技术的核心与原理 三、数字孪生技术在智慧水利中的应用场景 1、水库管理的挑战与需求 2、数字孪生水库管理系统的构建 四、数字孪生技术在水库管理中的具体应用案例 1、洪水预测与模拟 2、水资源配置与调度 3、大坝安全监测与评估 4、生态环…

【C++/STL深度剖析】stack和queue的详细概念和使用(图文详解,初学者必看!!)

目录 一、前言 二、stack 的详细解析 &#x1f525; stack的介绍&#x1f525; &#x1f525; stack的构造&#x1f525; &#x1f525; stack的常用接口&#x1f525; &#x1f4a7;push &#x1f4a7;top &#x1f4a7;pop &#x1f4a7;empty &#x1f4a7;size…

C# Queue、List、LinkedList 性能对比

最近需要用到一个先进先出的缓存列队&#xff0c;对比了一下几个可能用的类的性能。。 向添加100w个数据&#xff0c;然后每次弹出100个&#xff0c;输出用时 Queue<int> q new Queue<int>();List<int> l new List<int>();LinkedList<int> ll…

确保跨平台自动化测试脚本的稳定运行:获取谷歌浏览器与ChromeDriver版本20240703

确保跨平台自动化测试脚本的稳定运行&#xff1a;获取谷歌浏览器与ChromeDriver版本 在自动化测试中&#xff0c;确保谷歌浏览器&#xff08;Google Chrome&#xff09;与ChromeDriver版本匹配至关重要&#xff0c;特别是跨平台&#xff08;Windows和Linux&#xff09;测试时。…

Android文件路径获取

文件存储相关的文档 文件存储相关的系列文档如下&#xff0c;可根据需要查看这些文档 Android文件路径获取 Android存储权限梳理及api接口调用 Android各种存储路径的比较 Android R及以上版本中APP外部存储实现 Android文件路径获取 在Android开发中&#xff0c;经常需要…

24位DAC转换的FPGA设计及将其封装成自定义IP核的方法

在vivado设计中,为了方便的使用Block Desgin进行设计,可以使用vivado软件把自己编写的代码封装成IP核,封装后的IP核和原来的代码具有相同的功能。本文以实现24位DA转换(含并串转换,使用的数模转换器为CL4660)为例,介绍VIVADO封装IP核的方法及调用方法,以及DAC转换的详细…

为什么除以n-1而不是n得到的样本方差是总体方差的无偏估计量

文章目录 前言具体的解释&#xff1a; 前言 在统计学中&#xff0c;我们通常使用样本方差来估计总体方差。样本方差的计算通常是将每个观测值与样本均值的差的平方和除以样本大小减去1&#xff0c;即 ( 1 n − 1 ∑ i 1 n ( x i − x ˉ ) 2 ) (\frac{1}{n-1} \sum_{i1}^{n}…

REGX52.H报错

keil cannot open source input file "REGX52.H": No such file or directory 选择下面这个目录 Keil\C51\INC\Atmel

源码扭蛋机开发初探

在软件开发的世界里&#xff0c;创新总是层出不穷。今天&#xff0c;我们将一起探讨一个有趣而富有创意的项目——源码扭蛋机。源码扭蛋机&#xff0c;顾名思义&#xff0c;就是将传统的扭蛋机概念与代码编程相结合&#xff0c;让开发者们在扭动的过程中随机获得各种有趣的、实…

【持续更新】App Inventor 2 中文网原创内容

App Inventor 2 中文网原创的技术文档&#xff0c;作品&#xff0c;技术文章&#xff0c;帖子&#xff0c;问答&#xff0c;技术指导&#xff0c;问题解决思路等。 基础知识 【连接调试】App Inventor 2 连接方式&#xff1a;AI伴侣、模拟器、USB【连接调试】Ai2 Starter模拟…

pip常用命令详解

pip 是 Python 的官方第三方包管理工具之一&#xff0c;其为 Python 包的安装与管理提供了极大的便利。本文将详细介绍 pip 的常见命令及其用法&#xff0c;帮助读者更好地利用这一强大的工具。 1. 安装 pip 在开始使用 pip 之前&#xff0c;确保您的系统中已经安装了 pip。p…

synchronized和volatile

synchronized synchronized关键字的作用&#xff1a; 在Java中&#xff0c;synchronized关键字用于确保多个线程在访问共享资源时的安全性。它通过获取对象的内置锁&#xff08;也称为monitor&#xff09;来实现同步&#xff0c;保证了同一时刻只有一个线程可以进入同步代码块或…

Hadoop-12-Hive 基本介绍 下载安装配置 MariaDB安装 3台云服务Hadoop集群 架构图 对比SQL HQL

章节内容 上一节我们完成了&#xff1a; Reduce JOIN 的介绍Reduce JOIN 的具体实现DriverMapperReducer运行测试 背景介绍 这里是三台公网云服务器&#xff0c;每台 2C4G&#xff0c;搭建一个Hadoop的学习环境&#xff0c;供我学习。 之前已经在 VM 虚拟机上搭建过一次&am…

无人机在航拍领域有哪些独特优势?

那肯定是便宜啊&#xff0c;相比传统的飞机或直升机航拍作业&#xff0c;无人机航拍具有更快的响应速度和更低的成本。无人机可以随时随地进行起降&#xff0c;并在短时间内完成航拍任务&#xff0c;极大地提高了作业效率。同时&#xff0c;无人机的运营成本相对较低&#xff0…

Mac如何杀毒?Mac电脑如何杀毒 mac杀毒软件推荐 mac杀毒软件哪个好用

Mac的轻薄和便携是众多白领选择它作为办公PC的原因&#xff0c;而除此之外&#xff0c;Mac另一个被人选择的原因&#xff0c;是macOS 系统特有的安全性。因此许多人以为&#xff0c;Mac不需要安装专门的杀毒软件。然而事实并非如此&#xff01; 每年都会出现许多恶意软件准们针…