Vue實作textarea固定輸入行數與新增下劃線樣式的思路

這篇文章主要介紹了使用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=&#39;textarea&#39; @scroll=&#39;textsrc&#39; v-model=&#39;text.Headquarters&#39; ref=&#39;Headquarters&#39; rows="2"></textarea>

先取出

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

因為如果用戶一次複製一大段文字,  貼上到textarea裡則會直接出現多行, 刪除字串超出部分換行還會觸發scroll事件, 所以用if語句判斷一下是否滿足了限制.

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

 

textsrc() {  
this.$refs.Headquarters.scrollTo(0, 0)  
let LineNumber = this.$refs.Headquarters.scrollHeight / 35;  
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);  
 },

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何使用vue的transition完成滑動過渡

#vue-cli和webpack記事本專案創建

###

以上是Vue實作textarea固定輸入行數與新增下劃線樣式的思路的詳細內容。更多資訊請關注PHP中文網其他相關文章！