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 分钟前
从HTML敲击乐了解开发流程
javascript
烟袅1 分钟前
JavaScript 中的 null 与 undefined:你真的搞懂它们的区别了吗?
javascript
有点笨的蛋3 分钟前
“花”点心思学代理:JavaScript中的对象与中介艺术
javascript
Hilaku6 分钟前
一个函数超过20行? 聊聊我的函数式代码洁癖
前端·javascript·架构
不会算法的小灰11 分钟前
JavaScript 核心知识学习笔记:给Java开发者的实战指南
javascript·笔记·学习
crary,记忆1 小时前
Angular如何让整个项目的所有页面能够整体缩小一定的比例?
javascript·ecmascript·angular.js
一嘴一个橘子1 小时前
vue.js 视频截取为 gif - 2(将截取到的gif 转换为base64 、file)
vue.js
Mintopia1 小时前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
江城开朗的豌豆2 小时前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
你的电影很有趣2 小时前
lesson73:Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js