1.功能需求如下图:
2. 实现功能代码如图
下面是函数方法
这样就能实现这个需求了,至于预览功能就简单了,将设置好的模板提交给后端,后端提供一个预览接口,直接请求就可以了
如果文章对你有帮助,麻烦点个赞,谢谢~
最后附上方法源码,方便取用:
add () {
let val = '[' + this.dictate + ']'
let elInput = document.querySelector('#inputDom')
let startPos = elInput.selectionStart
let endPos = elInput.selectionEnd
// 判断是否有光标, 有光标在光标后面新增, 没有光标直接在最后拼接
if (startPos === undefined || endPos === undefined) {
let txt = elInput.value
let result = txt + val
this.ruleForm.dictateMemo = result
} else {
let txt = elInput.value
let result = txt.substring(0, startPos) + val + txt.substring(endPos)
elInput.value = result
elInput.focus()
this.$nextTick(() => {
elInput.selectionStart = startPos + val.length
elInput.selectionEnd = startPos + val.length
})
this.ruleForm.dictateMemo = result
}
},