vue js textarea光标位置插入指定元素

需求;点击插入关键字的时候把内容插入到光标所在的位置

效果图:

html:

      <div class="temlate-container">
                <div class="template-content">
                  <el-input
                    ref="modelContent"
                    v-model="mould.modelContent"
                    autocomplete="off"
                    :rows="4"
                    placeholder="请输入关键字"
                    type="textarea"
                    style="width:100%"
                    :readonly="readonly"
                    @input="listenKeyword"
                  />
                  <div v-show="!readonly" class="keyword-content">
                    <span class="keyword-title">插入关键字</span>
                    <div class="keyword-select">
                      <div class="mould-key">
                        <list-code-selector
                          v-model="mouldKeyName"
                          type="mouldKey"
                          :readonly="readonly"
                          @change="handleKeyword"
                        />
                        <el-button round :loading="loading" type="primary" @click="select">插入关键字</el-button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="example">示例:{{ mould.example }}</div>
              </div>

js方法:

  select() {
        if (isBlank(this.mouldKeyName)) return this.$message.warning('请选择关键字')
        const dom = this.$refs.modelContent.$refs.textarea
        console.log('this.mould.modelContent', this.mould.modelContent)
        let pos = 0
        if (dom.selectionStart || dom.selectionStart === 0) {
          // dom.selectionStart第一个被选中的字符的序号（index），从0开始
          pos = dom.selectionStart
          console.log(' dom.selectionStart', dom.selectionStart)
        } else if (document.selection) {
          // IE Support
          const selectRange = document.selection.createRange()
          selectRange.moveStart('character', -dom.value.length)
          pos = selectRange.text.length
        }
        console.log('pos', pos)
        const before = this.mould.modelContent.substr(0, pos)
        const after = this.mould.modelContent.substr(pos)
        console.log(pos, 'before', before, 'after===', after)
        this.mould.modelContent = before + '{' + this.mouldKeyName + '}' + after
        setTimeout(() => {
          if (dom.setSelectionRange) {
            // 当前元素内的文本设置备选中范围
            dom.setSelectionRange(pos, pos + this.mouldKeyName.length + 2)
            console.log('当前元素内的文本设置备选中范围====', pos, pos + this.mouldKeyName.length + 2)
          } else if (dom.createTextRange) {
            console.log('聚焦控件后把光标放到最后', dom.createTextRange)
            // IE Support
            const range = dom.createTextRange()
            range.collapse(true)
            range.moveEnd('character', pos)
            range.moveStart('character', pos)
            range.select()
          }
        }, 0)
        this.listenKeyword()//监听输入或选中内容是都括号对应及把选中的name改成example放入对应的示例下
      },
// 监听模块内容输入框
      listenKeyword() {
        const modelContent = this.mould.modelContent
        const getLocalexample = JSON.parse(localStorage.getItem('example'))
        const haveVal = /\{(.+?)\}/g // {123}|{} 花括号，大括号
        const result = modelContent.match(haveVal)
        if (modelContent.length === 0) {
          this.mould.example = ''
        }
        this.mould.example = modelContent
        if (isNotBlank(result) && this.isBracketBalance(modelContent)) {
          this.isSymmetry = false
          this.mould.example = modelContent
          result.forEach(code => {
            getLocalexample.forEach(key => {
              if (key.example) {
                if (code === key.code) {
                  this.mould.example = this.mould.example.replace(key.code, key.example)
                  // this.mould.example = this.mould.example.replace(key.code, '{' + key.example + '}')
                }
              } else {
                this.mould.example = this.mould.example.replace(key.code, '{' + this.mouldKeyName + '}')
              }
            })
          })
        } else if (!this.isBracketBalance(modelContent)) {
          this.isSymmetry = true
          this.$message.warning('缺少完整括号字符')
        }
      },
      // 判断括号是否对称
      isBracketBalance(str) {
        var leftBracketNum = 0
        var strLength = str.length
        for (var i = 0; i < strLength; i++) {
          var temp = str.charAt(i)
          if (temp === '{') {
            leftBracketNum++
          }
          if (temp === '}') {
            leftBracketNum--
          }
        }
        // 最后判断leftBracketNum，如果为0表示平衡否则不平衡
        if (leftBracketNum === 0) {
          return true
        } else {
          return false
        }
      },