PC端 Vue基于textarea 实现@人的功能

PC端 Vue基于textarea 实现@人的功能

效果：


直接上代码：
子组件：评论输入框的功能

index.js文件：

import Vue from 'src/views/base'
import { Component, Prop } from 'vue-property-decorator'
import template from './replyComment.vue'

@Component({
  name: 'unit-replyComment',
  mixins: [template]
})
export default class ReplyComment extends Vue {
  @Prop({
    default: () => {
      return []
    }
  })
  memberList

  text = ''
  textList = []
  showboard = false
  markselectpeople = false // 标记开始选人
  markdisable = false
  unwatch = () => {}
  operationindex = null

  watchText() {
    this.unwatch = this.$watch('text', function(cv, ov) {
      if (ov.length > cv.length) {
        let ovlist = [...ov]
        let cvlist = [...cv]
        let startremove = this.findDiffStart(cv, ov)
        let removestr = ''
        let difflength = ovlist.length - cvlist.length
        for (let j = startremove; j <= startremove + difflength - 1; j++) {
          removestr += ovlist[j]
        }
        // console.log('对比结果', startremove, ov, cv, removestr)
        // console.log(removestr, '匹配器结果')
        let atnamelist = this.findAtNameList()
        // console.log('atnamelist', atnamelist, removestr, startremove)
        for (let j = 0; j < atnamelist.length; j++) {
          for (let k = atnamelist[j].startindex; k <= atnamelist[j].endindex; k++) {
            if (k >= startremove && k <= startremove + removestr.length - 1) {
              atnamelist[j].remove = true
            }
          }
        }
        let temp = [...ov]
        let tempstr = [...ov]
        let finalstr = ''
        let tempTextList = [...this.textList]
        //  console.log('temp', temp)
        for (let j = 0; j < temp.length; j++) {
          // 拿出@xxx并标记
          for (let k = 0; k < atnamelist.length; k++) {
            if (atnamelist[k].remove && j >= atnamelist[k].startindex && j <= atnamelist[k].endindex) {
              // 使用ᑒ特殊符号进行标记
              tempstr[j] = 'ᑒ'
              tempTextList[j] = 'ᑒ'
            }
          }
          // 拿出正常删除的并标记
          if (j >= startremove && j <= startremove + removestr.length - 1) {
            tempstr[j] = 'ᑒ'
            tempTextList[j] = 'ᑒ'
          }
        }
        for (let j = 0; j < tempstr.length; j++) {
          if (tempstr[j] != 'ᑒ') {
            finalstr += tempstr[j]
          }
        }
        this.textList = []
        for (let j = 0; j < tempTextList.length; j++) {
          if (tempTextList[j] != 'ᑒ') {
            this.textList.push(tempTextList[j])
          }
        }
        if (finalstr !== ov) {
          //  console.log('finalstr', finalstr)
          this.text = finalstr
          //  console.log('之后的this.textList', this.textList)
          // 重新赋值 textList
          this.unwatch()
          setTimeout(() => {
            this.watchText()
          })
        } else {
          // 此时校验长度
        }
        //  console.log(finalstr, '最终')
        this.markdisable = false
      } else {
        if (this.markdisable) {
          this.text = ov
          this.unwatch()
          this.watchText()
          return
        }
        let startremove = this.findDiffForcvmoreOv(cv, ov)
        let removestr = ''
        let difflength = cv.length - ov.length
        for (let j = startremove; j <= startremove + difflength - 1; j++) {
          removestr += cv[j]
        }
        // console.log('对比结果' + removestr)
        let beforelinelist = this.textList.slice(0, startremove)
        let endlinelist = this.textList.slice(startremove)
        let namelist = [...removestr]
        this.textList = [...beforelinelist, ...namelist, ...endlinelist]
      }
    })
  }
  // 当cv大于ov时不一样
  findDiffForcvmoreOv(cv, ov) {
    let shorter = ov
    let longer = cv
    let longerlist = [...longer]
    let shorterlist = [...shorter]
    for (let j = 0; j < shorterlist.length + 1; j++) {
      for (let k = 0; k < longerlist.length; k++) {
        let sliced = longerlist.slice(k, k + longer.length - shorter.length)
        let begin = shorterlist.slice(0, j)
        let center = sliced
        let end = shorterlist.slice(j)
        let finalstr = [...begin, ...center, ...end].join('')
        if (finalstr == longer) {
          return j
        }
      }
    }
  }

  // 查找开始不同的index
  findDiffStart(cv, ov) {
    let str1 = ov
    let str2 = cv
    let str1list = [...str1]
    let str2list = [...str2]
    let thestartindex = null
    for (let j = 0; j < str1list.length; j++) {