标签：基于 vue console log textarea text let textlist target

此需求来源于一个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>

最终效果如下:

标签：基于,vue,console,log,textarea,text,let,textlist,target
来源： https://www.cnblogs.com/tony-stark/p/16116703.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。