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;

Aibac

4258人浏览 · 2021-03-18 09:28:16

Aibac · 2021-03-18 09:28:16 发布

效果

在这里插入图片描述

.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}})
    },
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^