需求

自定义公式输入框，要求：
1、通过点击的方式添加数据和符号；
2、自定义输入框中可以像普通输入框那样，在光标位置插入输入；
3、用户通过delete和backspace按键可以删除；
4、点击输入框，光标定位到最后；

npm直接使用

地址：element-textarea

//安装
npm i element-textarea//引入
import ElementTextarea from 'element-textarea'
import 'element-textarea/lib/element-textarea.css'

实现思路

1、沿用原生的 —— 失败

最初的想法是通过改造原生的输入框， 可以直接沿用本身自带的光标，
找到一个例子参考： 写一个可插入自定义标签的 Textarea 组件

这个里面666可以看作一个小组件，那应该可以满足上述需求！
但想象很丰满，现实很骨干！原生的光标只针对文字有效！对于组件，也是针对组件的内部文字起效！
加个边框就出现下面这种效果：

光标在组件里面，完全不行的啊摔！

2、只要那个光标就好

其实删除，插入什么的都好实现，那现在就剩那个光标的效果了，比如我这么干：
在小组件两边加个input，把框框去掉，不就有光标了！

可行！
先创建一个EditMock.vue, 模拟组件两边的输入光标， 实现键盘delete: 46 和backspace: 8的删除

<template><div class="edit-mock"><inputv-if="!noPre"ref="preInput"class="edit-mock__input"@keyup.46="handleDelete('now')"@keyup.8="handleDelete('pre')"@click.stop="handleClick('pre')"v-model="str"@input="noStrInput"/><slot></slot><inputv-if="!noSub"ref="subInput"class="edit-mock__input"@keyup.46="handleDelete('sub')"@keyup.8="handleDelete('now')"@click.stop="handleClick('now')"v-model="str"@input="noStrInput"/></div>
</template><script>
export default {props: {compId: {type: String,default: '',},// 前面的input不显示noPre: {type: Boolean,default: false,},// 后面的input不显示noSub: {type: Boolean,default: false,},},data() {return {str: '',}},methods: {handleDelete(type) {this.$emit('edit-keyup', { compId: this.compId, type })},handleClick(type) {this.$emit('edit-click', { compId: this.compId, type })},// 除了光标，什么都不让输入noStrInput() {this.str = ''},},
}
</script><style lang="scss" scoped>
.edit-mock {display: flex;height: 100%;&__input {text-align: center;width: 10px;height: 100%;background: #fff;border: none;}
}
</style>

这里noPre的作用主要是除了第一个组件需要在前面插入， 其他的都只需要后面的input即可。

3、 公式框实现

首先我们通过点击选中的符号和数字放到一个列表中，形成我们的公式列表:
比如： 0.33 + 1 的json格式如下

formulaItems = [{"uuid": "a039cd36-df4d-43e1-908d-52d264fcdeba","type": "num",  // 常数"value": "0.33"},{"uuid": "6bf10a3d-8311-4de3-b049-2db8513a1165","type": "sign",  // 符号"value": "+"},{"uuid": "4078a28f-144f-4041-9440-3d887234b13f","type": "num",  // 常数"value": "1"}
]

利用edit-mock渲染公式中的每个小组件（数字/符号）

<template><div class="formula-textarea" @click.stop="handleBoxClick"><edit-mockref="editMock"class="formula-textarea__item"v-for="(item, index) in formulaItems":id="item.uuid":key="item.uuid":noPre="index !== 0":compId="item.uuid"@edit-keyup="handleDelete"@edit-click="handleClick"><!-- 渲染符号 ，imgSignClass是设置相应符号图：忽略--><spanv-if="item.type === 'sign'":class="['sign', imgSignClass(item.value, undefined, 'blue')]"></span><!-- 渲染数字 --><p v-if="item.type === 'num'" class="num">{{item.value}}</p></edit-mock><!-- 没有公式的时候的 placeholder --><p v-if="itemLength <= 0" class="placeholder">{{placeholder}}</p></div>
</template><script>
import IndSelector from './IndSelector'
import EditMock from './EditMock'
import signClass from '@/views/dupont/sign-class.js'export default {name: 'FormulaTextarea',mixins: [signClass],components: {IndSelector,EditMock,},model: {prop: 'formulaItems',event: 'change',},props: {formulaItems: {type: Array,default: () => [],},insertIdx: {type: Number,default: -1,},placeholder: {type: String,default: '可通过点击符号/常数来构造公式...'}},data() {return {currentIdx: -1,}},computed: {itemLength() {return this.formulaItems.length},},methods: {handleDelete({ compId, type }) {const index = this.formulaItems.findIndex((item) => item.uuid === compId)// 第一个backspace和最后一个delete事件不处理const firstPre = index === 0 && type === 'pre'const lastSub = index === this.itemLength - 1 && type === 'sub'if (firstPre || lastSub) {return}// 删除当前，前一个还是后一个let delIndex = indexif (type === 'sub') {delIndex = index + 1} else if (type === 'pre') {delIndex = index - 1}this.formulaItems.splice(delIndex, 1)// 光标位置const idx = type === 'sub' ? index + 1 : indexthis.currentIdx = idx},// index 为insert的位置setInputFocus(index) {if (index >= 0 && this.itemLength > 0) {this.$nextTick(() => {const p = index === 0 ? 'preInput' : 'subInput'const itemIdx = index - 1 < 0 ? 0 : index - 1// XXX 只能通过id来找，refs中的顺序和实际顺序不一样// this.$refs.editMock[itemIdx].$refs[p].focus()const id = this.formulaItems[itemIdx].uuidconst node = this.$refs.editMock.find((item) => item.compId === id)node.$refs[p].focus()})}},handleClick({ compId, type }) {const index = this.formulaItems.findIndex((item) => item.uuid === compId)const nowIndex = type === 'pre' ? index : index + 1this.currentIdx = nowIndex},handleBoxClick() {// 盒子点击，光标放到最后this.currentIdx = this.itemLength// 这个事件必须调用，没有改变时， watch监听不到， 如点击外部，再点击box的情况this.setInputFocus(this.currentIdx)},},watch: {formulaItems: {handler(v) {// 为空时if (!v || v.length === 0) {this.currentIdx = -1}// 在首个插入没有设置光标if(this.currentIdx === 0){this.setInputFocus(0)}},deep: true,},insertIdx(v) {this.currentIdx = v},currentIdx(v) {// 同步外部位置this.$emit('update:insertIdx', v)// 设置光标位置this.setInputFocus(v)},},
}
</script><style lang="scss" scoped>
$itemheight: 24Px;
$numheight: $itemheight - 2Px;
.formula-textarea {border: $border;width: 100%;height: 100%;overflow: auto;display: inline-flex;flex-wrap: wrap;align-content: flex-start;.formula-textarea__item {display: inline-flex;margin: 10px 0px;height: $itemheight;line-height: $itemheight;.sign {margin-top: 2px;}.num {display: inline-block;@include font-size(14px);height: $numheight;line-height: $numheight;padding: 0 8px;background: $bg3;border: $border;border-radius: 2px;}.img-icon {margin-right: 0;}}.default-input {width: 10px;}.placeholder {color: $text-c2;padding: 10px;}
}
</style>

这里麻烦的一点在于光标位置的计算。

点击新增符号和数据， 这里主要注意新增时改变光标的位置：

/**
* 新增公式组件*/addFormulaItem(type, value, info) {const uuid = generateUUID()const res = { uuid, type, value }if (info) {res['info'] = info}// 定点插入和直接放到最后if (this.insertIdx < 0) {this.formulaItems.push(res)} else {this.formulaItems.splice(this.insertIdx, 0, res)// 最前面插入无需加1if(this.insertIdx !== 0) {this.insertIdx += 1}}},addNum() {this.addFormulaItem('num', this.numInput)},addSign(v) {this.addFormulaItem('sign', v)},

组件扩展

这里的数字和符号都看作组件处理，所以加个其他组件是很方便的：