vue基于textarea 实现@人的功能

此需求来源于一个pc端的网页，要求用户打出@的时候 能够出现候选人列表，当点击其中一个之后，文字则显示@xxxx

应产品要求

   1，当删除'@xxx'中其中的任意一个字符或字符串的时候 '@xxx' 这段字符串均被删除

   2，'@xxx'字符串中不得穿插其他内容 即当用户光标在'@xxx'中输入的时候，是无效的

思路：1,  首先绑定textarea v-model="text"

           2,  标记@出现的地方 这里我采用' `@ ' 标记选人开始的地方,选人完成后 @xxx 最后一个 x 标记为 ' x` '  ,那么根据 ` 开始 和` 结束 则标记了 一个完成的@xxxx 字段，这里我维护为一个数组

           3，删除的时候，

                      1i, 普通删除 :即删除非@xxx的字符或字符串

                      2i，删除@xxx当中的字符或字符串

                      3i ，关键是对比 看删除的内容是什么 从哪里开始 删除的长度是多少

           4，正是因为每次操作是单一连续的（即每次的操作均在某处插入或删除而非多处，这样就只需要维护两个变量，插入的位置和数量），所以才有可能完成此需求

预备知识： 1，textarea获取当前光标的位置 dom.selectionStart

                   2,  vue动态监听操作，有时候我们认为某一次的操作不应该触发watch，这时会采用动态监听如下, $watch会返回一个watcher函数 当我们调用他的时候 会取消掉vue对text的监听

                    

registerWatch() {
   this.watcher = this.$watch('text',function(cv,ov) {
          //xxxxx
     })

}     

     //操作text的方法
     handleTextOptions() {
         // 我们认为本次不需要监听text
        this.watcher()
        this.text = xxx
    }
     // 预先

　　         3， 维护一个

下面贴代码 

           

<template>
  <div id="app">
    <div class="btncontainer">
      <textarea
        id="textarea"
        @keydown="handleKeyDown"
        v-model="text"
        @input.prevent="handleInput"
        @focus="handleFocus"
        @mouseup="handleMouseUp"
      ></textarea>
      <div class="board" v-show="showboard">
        <div
          v-for="(item, index) in list"
          @click="handleItemClick(index)"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      env: process.env.NODE_ENV,
      active: 0,
      text: "",
      showboard: false,
      list: [],
      tempinput: "",
      markselectpeople: false, // 标记开始选人
      markdisable: false,
      unwatch: () => {},
      operationindex: null,
      oldtext: "",
      textlist: [],
    };
  },
  mounted() {
    window.vm0 = this;
    this.watchText();
    for (let j = 0; j < 20; j++) {
      let item = {
        name: "王尼玛" + j,
        id: j,
      };
      this.list.push(item);
    }
  },
  methods: {
    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];
      let thestartindex = null;
      for (let j = 0; j < shorterlist.length + 1; j++) {
        let insertindex = 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++) {
        let sliced = str1list.slice(j, j + str1.length - str2.length);
        let find = false;
        for (let k = 0; k < str2list.length; k++) {
          let beforestr = str2list.slice(0, j);
          let centerstr = sliced;
          let endstr = str2list.slice(j);
          console.log(
            [...beforestr, ...centerstr, ...endstr].join(""),
            "最终结果"
          );
          if ([...beforestr, ...centerstr, ...endstr].join("") == str1) {
            find = true;

            break;
          }
        }
        if (find) {
          thestartindex = j;
          console.log(j, "哈哈哈");
          break;
        }
      }
      return thestartindex;
    },
    setCaret() {
      var el = document.getElementById("editable");
      var range = document.createRange();
      var sel = window.getSelection();
      console.log(el.childNodes);
      range.setStart(el.childNodes[2], 1);
      range.collapse(true);

      sel.removeAllRanges();
      sel.addRange(range);
    },
    // 监听方向键
    handleKeyDown(e) {
      if (e.keyCode >= 37 && e.keyCode <= 40) {
        // alert(4)
        setTimeout(() => {
          console.log("位置", e.keyCode, e.target.selectionStart);
          let index = e.target.selectionStart - 1;
          console.log(index);
          let atgroup = this.findAtNameList();
          let disabled = false;
          for (let j = 0; j < atgroup.length; j++) {
            if (
              index >= atgroup[j].startindex &&
              index < atgroup[j].endindex &&
              index != this.text.length - 1
            ) {
              // e.target.selectionStart = atgroup[j].endindex
              // e.target.disabled = true
              disabled = true;
              break;
            }
          }
          this.markdisable = disabled;
        }, 5);
      }
    },
    // 处理鼠标左键按下
    handleMouseUp(e) {
      let index = e.target.selectionStart - 1;
      console.log(index);
      let atgroup = this.findAtNameList();
      let disabled = false;
      for (let j = 0; j < atgroup.length; j++) {
        if (
          index >= atgroup[j].startindex &&
          index < atgroup[j].endindex &&
          index != this.text.length - 1
        ) {
          // e.target.selectionStart = atgroup[j].endindex
          // e.target.disabled = true
          disabled = true;
          break;
        }
      }
      this.markdisable = disabled;
      e.stopPropagation();
      e.preventDefault();
    },
    handleFocus(e) {
      if (this.markselectpeople) {
        // 表明用户未选择内容
        this.textlist.splice(this.operationindex - 1, 0, "@");
        console.log("聚焦后的textlist", this.textlist);
        this.showboard = false;
        this.watchText();
        this.markselectpeople = false;
      } else {
        // 聚焦到非@xxxx的地方
        console.log(e.target.selectionStart, e.target.selectionEnd);
      }
      e.stopPropagation();
      e.preventDefault();
    },
    handleInput(e) {
      if (e.data == "@") {
        if (this.markdisable) {
          return;
        }
        this.showboard = true;
        this.markselectpeople = true;
        this.unwatch();
        setTimeout(() => {
          e.target.blur();
        }, 10);
        this.operationindex = e.target.selectionStart;
      } else {
        // this.placeCaretAtEnd(e.target);
        // e.target.selectionEnd= 2
        // var el = e.target;
        // var range = document.createRange();
        // console.log(range);
        // var sel = window.getSelection();
        // console.log(el.childNodes, "元素");
        // debugger;
        // range.setStart(el, 3);
        // range.collapse(true);
        // sel.removeAllRanges();
        // sel.addRange(range);
      }
      this.operationindex = e.target.selectionStart;
      console.log(this.operationindex);
      e.stopPropagation();
      e.preventDefault();
    },
    handleItemClick(index) {
      let textlist = [...this.text];
      let beforeline = textlist.slice(0, this.operationindex);
      let endline = textlist.slice(this.operationindex);
      console.log(beforeline, endline);
      this.text =
        beforeline.join("") + this.list[index].name + endline.join("");
      // console.log(JSON.stringify(this.textlist),"操作之前")
      this.textlist.splice(this.operationindex - 1, 0, "`@");
      // console.log(JSON.stringify(this.textlist),"插入之后")
      let beforelinelist = this.textlist.slice(0, this.operationindex);
      let endlinelist = this.textlist.slice(this.operationindex);
      let namelist = [...this.list[index].name];
      // console.log(beforelinelist,namelist,endlinelist)
      namelist[namelist.length - 1] = namelist[namelist.length - 1] + "`";
      this.textlist = [...beforelinelist, ...namelist, ...endlinelist];
      console.log("点击后的this.textlist:" + this.textlist);
      // TODO 添加响应式
      setTimeout(() => {
        this.watchText();
        this.showboard = false;
        this.markselectpeople = false;
      }, 10);
    },
    // 找寻@名称列表
    findAtNameList() {
      let atgroup = [];
      let textlist = this.textlist;
      let startindex = null;
      let endindex = null;
      console.log("findAtNameList", [...textlist]);
      for (let j = 0; j < textlist.length; j++) {
        if (textlist[j] == "`@") {
          startindex = j;
          // 开始标记
          // str += textlist[j]
          endindex = null;
        }
        if (textlist[j][textlist[j].length - 1] == "`") {
          // 结束符号
          if (startindex !== null) {
            endindex = j;
          }
        }
        if (startindex !== null && endindex !== null) {
          let item = {
            startindex: startindex,
            endindex: endindex,
          };
          startindex = null;
          endindex = null;
          atgroup.push(item);
        }
      }
      return atgroup;
    },
    goToHome() {
      if (this.$route.path == "/") {
        return;
      }
      this.$router.push({
        name: "HelloWorld",
      });
    },
    goToTest() {
      if (this.$route.path == "/Test") {
        return;
      }
      this.$router.push({
        name: "Test",
      });
    },
  },
};
</script>

<style lang="less">
#app {
  #editable {
    width: 100px;
    height: 100px;
  }
  .btncontainer {
    display: flex;
    textarea:disabled {
      background-color: white;
    }
    textarea {
      width: 200px;
      height: 200px;
    }
    .totest,
    .tohome {
      font-size: 12px;
      height: 30px;
      width: 80px;
      border: 1px solid gray;
      border-radius: 10px;
      margin-top: 10px;
      text-align: center;
      line-height: 30px;
      margin-left: 10px;
    }
    .text {
      width: 200px;
      height: 200px;
    }
    .board {
      width: 100px;
      max-height: 100px;
      overflow: scroll;
      cursor: pointer;
      .item {
        border-bottom: 1px solid gray;
        height: 20px;
        line-height: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>

最终效果如下: