点击文本框下方的按钮,将相应的文本插入光标处的实现:
<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}`;}
};