Vue實現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解
先上效果圖###
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è)置.
實現(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實現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了實現(xiàn)elementUI表單的全局驗證的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue3+vant4封裝日期時間組件方式(年月日時分秒),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue使用vuedraggable插件實現(xiàn)拖拽效果
這篇文章主要介紹了vue使用vuedraggable插件實現(xiàn)拖拽效果,本文分步驟介紹了安裝vuedraggable插件的方法及頁面引入的方法,需要的朋友可以參考下2024-04-04
本文主要介紹了Vue3刷新頁面報錯404的解決方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue-cli中的webpack是如何配置的，本篇文章主要是分析vue中關(guān)于config文件夾中的相關(guān)代碼，config的文件結(jié)構(gòu)，感興趣的朋友參考下本文2018-01-01
這篇文章主要介紹了Vue仿支付寶支付功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
vue3如何添加eslint校驗(eslint-plugin-vue)
這篇文章主要介紹了vue3如何添加eslint校驗(eslint-plugin-vue),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
vite+ts vite.config.ts使用path報錯問題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue input框的禁用和可輸入問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+element 多個相同的select不允許重復(fù)選擇問題
這篇文章主要介紹了vue+element 多個相同的select不允許重復(fù)選擇問題，具有很好的參考價值，希望對大家有所幫助。2022-07-07