先上效果圖###

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司、松桃網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、松桃網(wǎng)絡(luò)營銷、松桃企業(yè)策劃、松桃品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供松桃建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：www.rwnh.cn

textarea下劃線

設(shè)置一張1*35 //行高 的圖片 , 設(shè)置背景圖即可.

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

固定輸入行數(shù)

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

因為是限制行數(shù),所以不能用maxlength設(shè)置.

實(shí)現(xiàn)思路

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

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

首先取出

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

因為如果用戶一次復(fù)制一大段文字 ,  粘貼到textarea里則會直接出現(xiàn)多行 , 刪除字符串超出部分換行還會觸發(fā)scroll事件, 所以用if語句判斷一下是否滿足了限制.

發(fā)現(xiàn)多行代碼排版錯誤,貼張圖吧.

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;  
}  
},

寫一個刪除多余字符函數(shù)

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

總結(jié)

以上所述是小編給大家介紹的使用Vue實(shí)現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)站標(biāo)題：Vue實(shí)現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解
地址分享：http://www.rwnh.cn/article28/ihjicp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、域名注冊、ChatGPT、網(wǎng)站設(shè)計公司、網(wǎng)站導(dǎo)航、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)