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

22 篇文章 0 订阅
14 篇文章 0 订阅
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
            }
        },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值