vue中用户自定义短信模板设置,功能为点击添加有光标时在光标后面拼接数据,没光标时在短信模板后面直接拼接数据-白红宇

vue中用户自定义短信模板设置,功能为点击添加有光标时在光标后面拼接数据,没光标时在短信模板后面直接拼接数据

阅读量：20615 次

发布时间：2019-12-03

本文共 1050 字，大约阅读时间需要 3 分钟。

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            }        },

转载地址：http://bgevfk.baihongyu.com/

你可能感兴趣的文章