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}`;
  }
};
相关推荐
一 乐5 小时前
学籍管理平台|在线学籍管理平台系统|基于Springboot+VUE的在线学籍管理平台系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·学习
昨天;明天。今天。5 小时前
案例-表白墙简单实现
前端·javascript·css
安冬的码畜日常5 小时前
【玩转 JS 函数式编程_006】2.2 小试牛刀:用函数式编程(FP)实现事件只触发一次
开发语言·前端·javascript·函数式编程·tdd·fp·jasmine
小御姐@stella5 小时前
Vue 之组件插槽Slot用法(组件间通信一种方式)
前端·javascript·vue.js
GISer_Jing5 小时前
【React】增量传输与渲染
前端·javascript·面试
GISer_Jing5 小时前
WebGL在低配置电脑的应用
javascript
万叶学编程8 小时前
Day02-JavaScript-Vue
前端·javascript·vue.js
天涯学馆10 小时前
Next.js与NextAuth:身份验证实践
前端·javascript·next.js
HEX9CF11 小时前
【CTF Web】Pikachu xss之href输出 Writeup(GET请求+反射型XSS+javascript:伪协议绕过)
开发语言·前端·javascript·安全·网络安全·ecmascript·xss