vue a-textarea回车行头递增序号

<template>
  <div class="edit-container">
    <!-- 设置序号 -->
    <div class="left-content">
      <div class="order">
        <div class="order-number" v-for="(item, index) in numList" :key="index">
          <div :style="{ height: item.height + 'px' }">{{ index + 1 }}.</div>
        </div>
      </div>
    </div>
    <!-- 富文本框 -->
    <a-textarea
      @input="handleTextareaInput"
      v-model="areaText"
      @scroll="scrollTextArea"
      class="area-content"
    ></a-textarea>
    <!-- 辅助作用 -->
    <div class="text-content" ref="textRef">
      <div class="text-item" v-for="(item, index) in strList" :key="index">
        {{ item }}
      </div>
    </div>

    <button @click="save">保存数据</button>
  </div>
</template>

<script>
export default {
  name: "Textarea",
  data() {
    return {
      areaText: `1.console.log(chooseArea);//打印这个父节点里面的内容，看是否能获取到东西，如果是null则说明你获取chooseArea这个节点的路径有问题，建议重新获取
2.我的就是获取路径有问题，所以出了问题；
3.console.log(chooseArea);//打印这个父节点里面的内容，看是否能获取到东西，如果是null则说明你获取chooseArea这个节点的路径有问题，建议重新获取
4.我的就是获取路径有问题，所以出了问题；
5.console.log(chooseArea);//打印这个父节点里面的内容，看是否能获取到东西，如果是null则说明你获取chooseArea这个节点的路径有问题，建议重新获取
6.我的就是获取路径有问题，所以出了问题；`, //富文本框的值
      strList: [], //字符串列表
      numList: [],
    };
  },
  watch: {
    strList() {
      this.$nextTick(() => {
        let classList = document.querySelectorAll(".text-item");
        this.numList = [];
        this.strList.forEach(() => {
          let newItem = {
            height: 10,
          };
          this.numList.push(newItem);
        });
        classList.forEach((item, index) => {
          this.numList[index].height = item.offsetHeight || 20;
        });
      });
    },
  },
  mounted() {
    if (this.areaText) {
      let str = this.areaText;
      str = str.replace(/\r/gi, "");
      str = str.split("\n");
      this.strList = str.map((item, index) =>
        item.replace(index + 1 + ".", "")
      );
      this.areaText = this.strList.map((item) => item + "\n").join("");
    }
  },
  methods: {
    // 监听滚动
    scrollTextArea(e) {
      // 设置旁边序号滚动
      document.getElementsByClassName("order")[0].style.top =
        -e.target.scrollTop + "px";
    }, // 监听输入数据，换行提示
    handleTextareaInput(e) {
      let str = e.target.value;
      str = str.replace(/\r/gi, "");
      str = str.split("\n");
      this.strList = str;
    },

    save() {
      let str = "";
      this.strList.forEach((item, index) => {
        str += index + 1 + "." + item + "\n";
      });
      console.log(str);
    },
  },
};
</script>
<style scoped>
.edit-container {
  width: 379px;
  margin: 0 auto;
  position: relative;
  height: 200px;
  font-size: 14px;
}

/* 左边设置定位 */
.left-content {
  width: 30px;
  height: calc(100% - 8px);
  text-align: left;
  line-height: 20px;
  z-index: 100;
  position: absolute;
  left: 10px;
  top: 4px;
  overflow: hidden;
}
.order {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.order .order-number {
  width: 100%;
  display: block;
}
.area-content {
  width: 100%;
  height: 100%;
  line-height: 20px;
  padding-left: 40px;
  word-break: break-all;
}

.text-content {
  width: 100%;
  height: 100%;
  line-height: 20px;
  word-break: break-all;
  text-align: left;
  position: absolute;
  overflow: auto;
  padding: 4px 11px;
  padding-left: 40px;
  top: -9000px;
  left: -9000px;
}
</style>