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

phpjavac發表於2018-06-25
Vue

先上效果圖###

使用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語句判斷一下是否滿足了限制.

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

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

            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;                }            },複製程式碼

寫一個刪除多餘字元函式
複製程式碼

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

            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,歡迎有更好方法的大神賜教. 


相關文章