标签与文字混合的模板，实现标签插入与文字修改

<template>
  <div class="">
    <div class="textarea" >
      <template v-for="(item, index) in list">
        <span :key="index" class="list">
          <Tag color="primary" closable @on-close="closeTag(index)" v-if="item.type === 'tag'">{{item.value}}</Tag>
          <span class="contenteditable" v-if="item.type === 'text'" contenteditable="true" @blur="onblur($event.target.innerHTML, index)" @foucs="onfoucs($event.target.innerHTML, index)">{{item.value}}</span>
        </span>
      </template>
    </div>
    <Select style="margin-top: 30px; width: 300px;" v-model="select" @on-change="selectChanges">
        <Option v-for="item in cityList" :value="item.label" :key="item.label">{{ item.label }}</Option>
    </Select>
    <div style="padding: 30px;">
      {{list}}
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        }
      ],
      list: [
        {
          type: 'text',
          value: '尊敬的用户'
        },
        {
          type: 'tag',
          value: '：您好您编号为'
        },
        {
          type: 'text',
          value: '123456'
        },
        {
          type: 'tag',
          value: '的来件已办结'
        }
      ],
      activeIndex: -1,
      startOffset: -1,
      endOffset: -1,
      select: ''
    }
  },
  created () {
  },
  methods: {
    // 选择
    selectChanges () {
      let item = null
      // 根据当前项索引取出当前项
      this.list.forEach((e, i) => {
        if (i === this.activeIndex) {
          item = e
        }
      })
      // 定义一个数组
      let arr = []
      // 根据光标位置截取出前半段
      arr.push({
        type: item.type,
        value: item.value.substring(0, this.startOffset)
      })
      // 将选中的数据插入到光标位置为
      arr.push({
        type: 'tag',
        value: this.select
      })
      // 根据光标位置截取出后半段
      arr.push({
        type: item.type,
        value: item.value.substring(this.endOffset, item.value.length)
      })
      // 取出当前项 前面的对象
      let start = this.list.splice(0, this.activeIndex)
      // 截取掉当前项 则还剩余 当前项 后面的对象
      this.list.splice(0, 1)
      // 将整理好的数组对象按顺序相加
      this.list = start.concat(arr, this.list)
    },
    onblur (html, index) {
      if (html) {
        this.list.forEach((e, i) => {
          if (i === index) {
            e.value = html
            this.list.splice(index, 1, e)
          }
        })
        // 记录光标的位置 并且记录当前操作的对象的索引
        let sel = window.getSelection()
        let getRangeAt = sel.getRangeAt(0)
        this.activeIndex = index
        this.startOffset = getRangeAt.startOffset
        this.endOffset = getRangeAt.endOffset
      } else {
        for (let i = 0; index < this.list.length; i++) {
          if (i === index) {
            this.list.splice(index, 1)
            return
          }
        }
      }
    },
    // 删除标签
    closeTag (index) {
      this.list.forEach((e, i) => {
        if (i === index) {
          this.list.splice(index, 1)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.textarea{
  width: 100%;
  min-height: 200px;
  border-radius: 4px;
  border: 1px solid #cacaca;
  padding: 10px;
  font-size: 16px;
  line-height: 42px;
  .list{
    display: inline-block;
    padding: 0px 3px;
  }
  .contenteditable:focus{
    outline: none;
  }
}
</style>