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}`;
  }
};

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python28-7.1 降维算法之PCA主成分分析

降维算法是一类数据处理技术&#xff0c;主要用于将高维数据映射到低维空间中&#xff0c;从而减少数据的维度。降维不仅可以减少计算复杂度&#xff0c;提高算法性能&#xff0c;还可以帮助数据可视化。常见的降维算法包括主成分分析&#xff08;PCA&#xff09;、线性判别分析…

冒泡排序写法

正宗的冒泡排序写法&#xff1a; public class BubbleSort {public static void main(String[] args) {int[] a {4,6,5,24,3,7,1};//初始化一个最大角标变量int n a.length-1;//循环轮次for (int i0;i<n;i){//从后向前开始&#xff0c;相邻元素比较大小&#xff0c;小的元…

HTML制作一个时钟走动效果

大家好&#xff0c;今天制作一个时钟走动效果&#xff01; 先看具体效果&#xff1a; 一、以下是一个简单的时钟走动效果的实现&#xff0c;使用了HTML、JavaScript和CSS技术。 <!DOCTYPE html> <html lang"en"> <head> <meta charset"…

【Linux】生物信息学常用基本命令

wget网址用于直接从网上下载某个文件到服务器&#xff0c;当然也可以直接从网上先把东西下到本地然后用filezilla这个软件来传输到服务器上。 当遇到不会的命令时候&#xff0c;可以使用man “不会的命令”来查看这个命令的详细信息。比如我想要看看ls这个命令的详细用法&…

Linux磁盘监控小技巧

作者&#xff1a;田逸&#xff08;formyz&#xff09; 默认情况下&#xff0c;使用Nrpe插件check_disk加选项“-w”与”-c”除了输出我们想监控的磁盘分区外&#xff0c;还输出了一些形如“/dev/shm”不需要监控的项目(如下图所示)&#xff0c;倒对查看起到了一些干扰作用。 从…

解决使用monaco-editor编译器,编译器展示内容没有超过编译器高度,但是出现滚动条问题

前言&#xff1a; 最近在完成项目时&#xff0c;有使用编译器进行在线编辑的功能&#xff0c;就选用了monaco-editor编译器&#xff0c;但是实现功能之后&#xff0c;发现即使在编译器展示的内容没有超过编译器高度的情况下&#xff0c;编译器依旧存在滚动条&#xff0c;会展示…

64、基于去噪卷积神经网络的彩色图像去噪(matlab)

1、基于去噪卷积神经网络的彩色图像去噪的原理及流程 基于去噪卷积神经网络的彩色图像去噪是一种基于深度学习的图像处理技术&#xff0c;可以有效地去除图像中的噪声&#xff0c;提高图像的质量。下面是在Matlab中实现基于去噪卷积神经网络的彩色图像去噪的原理及流程&#x…

01:Linux的基本命令

Linux的基本命令 1、常识1.1、Linux的隐藏文件1.2、绝对路径与相对路径 2、基本命令2.1、ls2.2、cd2.3、pwd / mkdir / mv / touch / cp / rm / cat / rmdir2.4、ln2.5、man2.6、apt-get 本教程是使用的是Ubuntu14.04版本。 1、常识 1.1、Linux的隐藏文件 在Linux中&#xf…

centos7 mqtt服务mosquitto搭建记录

1、系统centos7.6&#xff0c;安装默认版本 yum install mosquitto 2、启动运行 systemctl start mosquitto 3、设置自启动 systemctl enable mosquitto 4、修改配置文件 vim /etc/mosquitto/mosquitto.conf 监听端口&#xff0c;默认为1883&#xff0c;需要修改删除前面…

Python番外篇之责任转移:有关于虚拟机编程语言的往事

编程之痛 如果&#xff0c;你像笔者一样&#xff0c;有过学习或者使用汇编语言与C、C等语言的经历&#xff0c;一定对下面所说的痛苦感同身受。 汇编语言 将以二进制表示的一条条CPU的机器指令&#xff0c;以人类可读的方式进行表示。虽然&#xff0c;人类可读了&#xff0c…

thinksboard新建table表格

html文件 <div fxFlex fxLayoutAlign"left top" style"display: block"> <!-- <mat-card appearance"raised" style"max-height: 80vh; overflow-y: auto;">--><div><button mat-raised-button (click)&…

数据结构(JAVA)—代码题

01-数据结构—判断题 02-数据结构—选择题 03 数据结构—多选填空程序填空 ​ 01-顺序表的建立及遍历 import java.util.Iterator; import java.util.LinkedList; import java.util.ListIterator; import java.util.Scanner;public class Main {public static void main(St…

告别熬夜改稿:AI降重工具让论文降重变得轻松又有趣

已经天临五年了&#xff0c;大学生们还在为论文降重烦恼……手动降重确实是个难题&#xff0c;必须要先付点小经费去靠谱的网站查重&#xff0c;再对着红字标注去改&#xff0c;后面每一次的论文呢查重结果都像赌//博&#xff0c;谁也不知道明明是同一篇文章&#xff0c;第二次…

【C语言】union 关键字

在C语言中&#xff0c;union关键字用于定义联合体。联合体是一种特殊的数据结构&#xff0c;它允许不同的数据类型共享同一段内存。所有联合体成员共享同一个内存位置&#xff0c;因此联合体的大小取决于其最大成员的大小。 定义和使用联合体 基本定义 定义一个联合体类型时…

【MySQL】MySQL锁冲突排障纪要

【MySQL】MySQL锁冲突排障纪要 开篇词&#xff1a;干货篇&#xff1a;1.查看当前innodb status,里面包含事务,锁占用情况2.查看mysql进程状态3.查看innodb事务&#xff0c;锁&#xff0c;锁等待情况4.定位持有锁的线程信息 总结篇&#xff1a;一、锁冲突的原因二、锁冲突的表现…

【Python】列表

目录 一、列表的概念 二、列表的创建 1.变量名 [ ] ..... 2.通过Python内置 的I ist类的构造函数来创建列表 三、操作列表元素的方法 1. 修改 2. 增加元素 3. 删除 4. 其他操作 四、遍历列表 五、列表排序 六、列表切片&#xff08;list slicing&#xff09; 七、…

Python入门 2024/7/2

目录 格式化的精度控制 字符串格式化 对表达式进行格式化 小练习&#xff08;股票计算小程序&#xff09; 数据输入 布尔类型和比较运算符 if语句 小练习&#xff08;成人判断&#xff09; if-else语句 if-elif-else语句 练习&#xff1a;猜猜心里数字 嵌套语句 猜…

JavaScript中的Array(数组)对象

目录 一、Array数组对象 1、介绍 2、创建数组对象并赋值 3、访问数组元素 二、Array对象属性 1、constructor属性 2、length属性 3、prototype属性 三、Array对象的常用方法 1、isArray() 2、concat() 3、pop() 4、shift() 5、push() 6、unshift() 7、reverse(…

前端进阶:Vue.js

目录 框架&#xff1a; 助解&#xff1a; 框架&#xff1a; VUE 什么是Vue.js? Vue.js优点 Vue安装 方式一&#xff1a;直接用<script>引入 方式二&#xff1a;命令行工具 第一个Vue程序 代码 代码解释&#xff1a; 运行 Vue指令 v-text v-html v-tex…

git 中有关 old mode 100644、new mode 10075的问题解决小结

问题&#xff1a; 同一个文件被修改后&#xff0c;最后代码没有变&#xff08;代码刚开始修改了&#xff0c;最后又删除还原了&#xff09;&#xff0c;文件变了&#xff0c;导致提交了一个空文件 git diff 提示 filemode 发生改变&#xff08;old mode 100644、new mode 1007…