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}`;
  }
};
相关推荐
暮之沧蓝1 小时前
Vue总结
前端·javascript·vue.js
木易 士心2 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
excel2 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
zero13_小葵司3 小时前
在Vue项目中构建后端配置的动态路由及权限控制体系
前端·javascript·vue.js
GISer_Jing3 小时前
前端框架篇——Vue&React篇
前端·javascript
子兮曰3 小时前
WebSocket 连接:实现实时双向通信的前端技术
前端·javascript·websocket
羊羊小栈5 小时前
基于「YOLO目标检测 + 多模态AI分析」的光伏板缺陷检测分析系统(vue+flask+模型训练+AI算法)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
jump_jump6 小时前
超长定时器 long-timeout
前端·javascript·node.js
我登哥MVP7 小时前
HTML-CSS-JS-入门学习笔记
javascript·css·笔记·学习·html