首頁 > web前端 > js教程 > 主體

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

不言
發布: 2018-06-28 15:37:49
原創
2156 人瀏覽過

這篇文章主要介紹了使用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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板