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}`;
  }
};
相关推荐
Dread_lxy10 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
前端郭德纲2 小时前
浏览器是加载ES6模块的?
javascript·算法
JerryXZR2 小时前
JavaScript核心编程 - 原型链 作用域 与 执行上下文
开发语言·javascript·原型模式
帅帅哥的兜兜2 小时前
CSS:导航栏三角箭头
javascript·css3
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图2 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js
夜色呦2 小时前
掌握ECMAScript模块化:构建高效JavaScript应用
前端·javascript·ecmascript
peachSoda72 小时前
随手记:简单实现纯前端文件导出(XLSX)
前端·javascript·vue.js