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}`;
  }
};
相关推荐
早上好啊! 树哥2 小时前
JavaScript Math(算数) 对象的用法详解
开发语言·javascript·ecmascript
screct_demo3 小时前
通俗易懂的讲一下Vue的双向绑定和React的单向绑定
前端·javascript·html
有心还是可以做到的嘛3 小时前
ref() 和 reactive() 区别
前端·javascript·vue.js
山楂树の6 小时前
xr-frame 通过shader去除视频背景色,加载透明视频
javascript·线性代数·ar·xr·图形渲染
拖孩7 小时前
💥大家好,我是拖孩🎤
前端·javascript·后端
鹿屿二向箔7 小时前
JavaScript (JS) 前端开发
javascript
Z3r4y7 小时前
【Web】极简&快速入门Vue 3
前端·javascript·vue.js·vue3
码农0008 小时前
CORS三问
vue.js
蓝天星空9 小时前
html生成注册与登录代码
javascript·css·html
浪遏9 小时前
Langchain.js | chat PromptTemplate| 重拳出击第二式
前端·javascript·aigc