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

news2024/11/22 9:52:45

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

<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.coloradmin.cn/o/1888550.html

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

相关文章

解决“Undefined control sequence. \hline”

解决“Undefined control sequence. \hline” Q:创建表格时显示错误“Undefined control sequence. \Xhline”A:解决方法C介绍\usepackage{makecell}作用使用方法示例其他功能总结 Q:创建表格时显示错误“Undefined control sequence. \Xhline” MTMAGVDPP.tex: 错误: 211: Un…

R语言学习与笔记2-RRStudio环境配置(Windows版)

R语言学习与笔记2-R&RStudio环境配置&#xff08;Windows版&#xff09; 安装 R安装RStudio修改默认工作目录修改镜像验证镜像源修改文件编码 环境测试 安装 R R下载地址&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/CRAN/bin/windows/base/ 点击下载链接并运行安装…

互联网医院系统源码解析:如何打造智能数字药店APP?

在互联网技术飞速发展的今天&#xff0c;医疗行业也在不断与之融合&#xff0c;互联网医院系统应运而生。特别是智能数字药店APP的兴起&#xff0c;使得医疗服务变得更加便捷、高效。本文将深入解析互联网医院系统源码&#xff0c;探讨如何打造一个智能的数字药店APP。 一、互…

聚焦 Navicat 17 新特性 | 让用户界面交互更丝滑

随着 Navicat 17 的发布&#xff0c;引起业界热烈反响和深入讨论。早前&#xff0c;我们介绍了 Navicat 17 《模型设计创新与优化​​​​​​​》与《查询与配置》的新特性。此外&#xff0c;Navicat 在用户界面交互方面进行了显著优化&#xff0c;新增了一系列实用的功能&…

springboot高校在线健康咨询服务APP-计算机毕业设计源码86100

摘要 随着信息技术的快速发展和智能手机的普及&#xff0c;移动互联网已经成为现代人生活中不可或缺的一部分。在这一背景下&#xff0c;高校在线健康咨询服务APP应运而生&#xff0c;旨在为广大高校师生提供更加便捷、高效、个性化的健康咨询服务。 高校作为人才培养的摇篮&am…

【硬件模块】SGP30气体传感器

SGP30 这是SGP30官方文档里开头的介绍&#xff0c;简单来说就是SGP30是一个数字多像素气体传感器&#xff0c;然后具有长期稳定性和低漂移。 这些我们都不用管&#xff0c;我们只需要知道SGP30是通过I2C来通信的&#xff0c;并且可以采集的数据有CO2和TVOC的含量。TVOC是“To…

记一次android打包,因路由规则设置不合理而导致pom文件无法访问的错误

一、错误详情 FAILURE: Build failed with an exception.* What went wrong: Could not determine the dependencies of task :mediaplayer:compileReleaseAidl. > Could not resolve all task dependencies for configuration :mediaplayer:releaseCompileClasspath.> C…

编译原理必考大题:构造项目集规范族,构造LR(0)分析表

在学习项目集规范族的构造之前,要先知道什么是项目?什么是项目集的闭包运算? 文章目录 前置知识LR(0)项目项目集的闭包运算项目转换函数GO 构造项目集规范族解决方法 构造LR(0)分析表真题实战: 前置知识 LR(0)项目 项目就是规则加上’’ 例如一条规则,A→abc 它对应的项目就…

【C++】开源:命令行解析库CLI11配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍命令行解析库CLI11配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#x…

智能改写工具大比拼:5款免费工具帮你告别重复内容

写作人员在创作文章时&#xff0c;经常面临着展现知识深度和创新思维的双重挑战。 在此过程中难免会遇到内容重复或灵感不足的问题。但不必过于焦虑。文章智能改写工具可以成为你的得力助手&#xff0c;帮你克服大部分写作难题。 接下来&#xff0c;让我们一起探索那些备受推…

重生奇迹mu精灵之心怎么搭配

玩家可以通过召唤来召唤多种精灵之心&#xff0c;每种精灵之心增加的属性也不同。精灵之心的作用是为了提升各种各样的属性。我们可以通过召唤获得精灵之心&#xff0c;前面的解锁费用较低&#xff0c;而后面的解锁需要大量的金币来解锁。 召唤精灵之心后&#xff0c;我们可以…

ROS2 rosbag2记录仪

rosbag2类似于行车记录仪&#xff0c;录制一段话题数据&#xff0c;录制完成后可以多次发布出来进行测试和实验&#xff0c;也可以将话题数据分享给别人用于验证算法等。 1.启动talker服务 ros2 run demo_nodes_cpp talker 2.记录话题数据 chatter ros2 bag record /chatte…

STL的六大组件

一.总体概念 STL&#xff08;Standard Template Library&#xff0c;标准模板库&#xff09;是C标准库的一部分&#xff0c;提供了丰富且高效的数据结构和算法。STL主要由六大组件组成&#xff0c;它们是&#xff1a; 容器&#xff08;Containers&#xff09;&#xff1a;STL提…

AIGC文生图lora微调训练案例;SD-Train界面训练stable Diffusion lora模型

lora仓库&#xff08;1000多个lora微调模型分享&#xff09;&#xff1a; https://lorastudio.co/models 参考&#xff1a; https://huggingface.co/blog/lora https://github.com/huggingface/diffusers/blob/main/examples/text_to_image/train_text_to_image_lora.py http…

UMI 命令行手册

Translate to English 命令行手册&#xff1a; README_CLI.mdHTTP接口手册&#xff1a; README_HTTP.md 命令行手册 基础说明 命令行调用入口就是主程序 Umi-OCR.exe 。如果你使用的是备用启动器&#xff08;如UmiOCR-data/RUN_GUI.bat&#xff09;&#xff0c;可能无法使用…

【TS】TypeScript 原始数据类型深度解析

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 TypeScript 原始数据类型深度解析一、引言二、基础原始数据类型2.1 boolean2.2 …

推荐系统三十六式学习笔记:原理篇.MAB问题|16|简单却有效的Bandit算法

目录 推荐就是选择MAB问题Bandit算法1.汤普森采样算法2.UCB算法3.Epsilon贪婪算法4.效果对比 冷启动总结 推荐系统的使命就是建立用户和物品之间的连接。建立连接可以理解成;为用户匹配到最佳的物品&#xff1b;但也有另一个理解就是&#xff0c;在某个时间某个位置为用户选择最…

彩虹PLM系统:电子制造业的高效协同平台

彩虹PLM系统&#xff1a;电子制造业的高效协同平台 在当今竞争激烈的电子制造业中&#xff0c;企业亟需一种能够整合全生命周期数据、促进跨部门协同并提升生产效率的解决方案。彩虹PLM系统&#xff0c;作为产品生命周期管理的佼佼者&#xff0c;凭借其卓越的技术实力和丰富的行…

前端基础--Vue3

Vue3基础 VUE3和VUE2的区别 2020年9月18日&#xff0c;Vue.js发布版3.0版本&#xff0c;代号&#xff1a;One Piece 于 2022 年 2 月 7 日星期一成为新的默认版本! Vue3性能更高,初次渲染快55%, 更新渲染快133% 。体积更小 Vue3.0 打包大小减少41%。 同时Vue3可以更好的支持T…

AI 影评生成

电影作为一种重要的艺术形式&#xff0c;承载着无穷的想象力和情感表达。它不仅是娱乐的载体&#xff0c;更是一面照亮人性、社会和历史的镜子。通过电影&#xff0c;观众可以体验不同的世界、感受各种情感&#xff0c;甚至找到共鸣和启发。在这个充满多样性和创意的电影世界中…