使用VUE實現textarea固定輸入行數與添加下劃線樣式.

先上效果圖###

textarea下劃線

設置一張1*35//行高的圖片 , 設置背景圖便可.

background: url('./img/linebg.png') repeat;
border: none;outline: none;overflow: hidden;
line-height: 35px;//注意行高要和背景圖高度一致resize: none;複製代碼

固定輸入行數

需求:用戶固定不論多少字節,只能輸入2行.

由於是限制行數,因此不能用maxlength設置.

實現思路

首先想到計算出用戶輸入了幾行,而後超出部分字符刪除掉就OK.

<textarea class='textarea' @scroll='textsrc' v-model='text.Headquarters' ref='Headquarters' rows="2"></textarea>複製代碼

首先取出

textarea元素的總體高度,而後除一下行高很輕鬆的到目前輸入到幾行.

由於若是用戶一次複製一大段文字 ,  粘貼到textarea裏則會直接出現多行 , 刪除字符串超出部分換行還會觸發scroll事件, 因此用if語句判斷一下是否知足了限制.

發現多行代碼排版錯誤,貼張圖吧.

textsrc() {                this.$refs.Headquarters.scrollTo(0, 0)                let LineNumber = this.$refs.Headquarters.scrollHeight / 35;                console.log(this.state)                if (LineNumber => 2) {                    this.state = false;                } else {                    this.state = true;                };                !this.tiemr && !this.state && this.tiemer();                this.tiemr && this.state && clearInterval(this.tiemr);                if (this.state) {                    this.tiemr = null;                }            },複製代碼

寫一個刪除多餘字符函數
複製代碼

tiemer() {                this.tiemr = setInterval(() => {                    this.text.Headquarters = this.text.Headquarters.slice(                        0,                        this.text.Headquarters.length - 1                    );                    if (this.$refs.Headquarters.scrollHeight / 35 == 2) {                        clearInterval(this.tiemr)                        this.tiemr = null                        this.state = true                    }
                }, 10);            },複製代碼

複製代碼

最後貼一下github,歡迎有更好方法的大神賜教.