Vue textarea实现编辑框，并添加行号

最新推荐文章于 2024-06-04 11:52:20 发布

Song_Estelle

最新推荐文章于 2024-06-04 11:52:20 发布

阅读量2.8k

点赞数 2

分类专栏： vue 前端文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_43484014/article/details/124046923

版权

前端同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

vue

31 篇文章 3 订阅

订阅专栏

实现的效果如下：
在这里插入图片描述

内容部分代码

<div class="edit-container">
  <div class="edit">
    <div class="leftBox"><textarea wrap="off" cols="2" id="leftNum" disabled></textarea></div>
    <textarea
        @input="handleTextareaInput"
        v-model="areaText"
        onscroll="document.getElementById('leftNum').scrollTop = this.scrollTop;"
        spellcheck="false"
        class="area-content"></textarea>
  </div>
</div>

<script>
export default {
  name: "EditFileContent",
  data() {
    return {
      areaText: '',
      num: ''
    }
  },
  methods: {
    handleTextareaInput(e) {
      let str = e.target.value;
      str = str.replace(/\r/gi, "");
      str = str.split("\n");
      let n = str.length;
      let lineobj = document.getElementById("leftNum");
      for (let i = 1; i <= n; i++) {
        if (document.all) {
          this.num += i + "\r\n";   //判断浏览器是否是IE
        } else {
          this.num += i + "\n";
        }
      }
      lineobj.value = this.num;
      this.num = "";
    }
  }
}

</script>

.edit-container {
  height: 570px;
  padding: 10px 20px;
}

.edit {
  display: flex;
  height: 530px;
}

.leftBox {
  width: 40px;
  height: 100%;
  text-align: left;
}

.area-content {
  padding: 10px 8px;
  width: 100%;
  height: 100%;
  font-size: 13px;
  line-height: 24px;
  color: #2dc26b;
  font-family: Consolas;
  border: none;
  background: #373737;
  box-sizing: border-box;
  outline: none;
  resize: none;
}

#leftNum {
  padding: 10px 4px;
  height: 100%;
  width: 100%;
  line-height: 24px;
  font-size: 13px;
  text-align: right;
  color: #fff;
  font-weight: bold;
  resize: none;
  outline: none;
  // overflow-y: hidden;
  // overflow-x: hidden;
  border: 0;
  background: black;
  box-sizing: border-box;
}