Vue textarea动态显示行数

效果

在这里插入图片描述

.edit {
    display: flex;
     height: 300px;
 }
 #leftBox {
     width: 40px; 
     height:100%; 
     text-align:left; 
 }
 #edit-content {
     padding:10px 8px;  
     width:100%; 
     height:100%; 
     font-size: 12px;
     line-height: 24px;
     color: black; 
     font-family: inherit; 
     border:1px solid #eaeaea; 
     background: rgb(255, 255, 255, 1);
     box-sizing: border-box;
     outline:none; 
     resize: none; 
 }
 #leftNum { 
     padding:10px 4px; 
     height:100%; 
     width: 100%; 
     line-height: 24px;
     font-size: 12px; 
     text-align: right; 
     color: #999;
     font-weight: bold; 
     resize: none;
     outline:none; 
     overflow-y: hidden; 
     overflow-x: hidden; 
     border: 0; 
     background:rgba(199, 208, 220, 1);
     box-sizing: border-box;
 }
<body>
    <div class="edit" id="app">
        <div id="leftBox"><textarea wrap="off" cols="2" id="leftNum" disabled></textarea></div>
        <textarea @input="handleTextareaInput" v-model="areatext" onscroll="document.getElementById('leftNum').scrollTop = this.scrollTop;" id="edit-content"></textarea>
    </div>
</body>
new Vue({
    el: '#app',
    data: {
        areatext: 'a\r\nb\r\nd',
        num: ''
    },
    methods: {
        handleTextareaInput(e) {
            var str = e.target.value
            str = str.replace(/\r/gi,"");
            str = str.split("\n");
            n = str.length;
            var lineobj = document.getElementById("leftNum");
            for(var 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 = "";
        }
    },
    mounted() {
        this.handleTextareaInput({target: {value: this.areatext}})
    },
})
  • 9
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值