el-input設(shè)置后綴顯示單位并阻止?jié)L輪微調(diào)的解決方法
項(xiàng)目中收集form表單信息時(shí),有時(shí)會(huì)需要在el-input后面顯示單位,效果如圖:
當(dāng)然,我們可以直接在輸入框后面加上單位,但直接給輸入框上加單位不管是視圖上還是用戶體驗(yàn)上看起來(lái)都要好一點(diǎn)
element-plus / element-ui給我們提供了對(duì)應(yīng)插槽
圖中效果顯然是尾部?jī)?nèi)容,因此只需要使用suffix插槽即可實(shí)現(xiàn)該效果
<el-input v-model='data'> <template #suffix>元</template> </el-input>
這里我要提一個(gè)額外的內(nèi)容,由于我這里收集的是數(shù)字,因此我給el-input設(shè)置了type=‘number’,但總是不知道什么情況,有時(shí)輸入框中的數(shù)值比我輸入的有細(xì)微出入
其實(shí),后來(lái)無(wú)意間發(fā)現(xiàn)是輸入框的滾輪滾動(dòng)事件,一般給el-input添加了type='number’后,輸入框后面會(huì)出現(xiàn)上下兩個(gè)箭頭可以對(duì)數(shù)值進(jìn)行微調(diào)。
如果鼠標(biāo)光標(biāo)在輸入框內(nèi)并聚焦時(shí),滾動(dòng)滾輪也會(huì)微調(diào)數(shù)值,因此我就出現(xiàn)了這個(gè)問(wèn)題,輸入完數(shù)值,此時(shí)鼠標(biāo)還聚焦在輸入框內(nèi),滾動(dòng)滾輪(因?yàn)槲姨顚憙?nèi)容較多這個(gè)頁(yè)面有滾動(dòng)條需要滾動(dòng)到上方/下方去填寫別的內(nèi)容),此時(shí)我輸入框中的數(shù)值就會(huì)因?yàn)槲覞L動(dòng)滾輪進(jìn)行了微調(diào),出現(xiàn)數(shù)值與輸入的數(shù)值不一致
解決方法,就是阻止el-input滾輪事件的默認(rèn)行為
<template> <el-input v-model='data' @wheel='preventScroll'> <template #suffix>元</template> </el-input> </template> <script> export default { data(){ return { data } }, methods:{ preventScroll(e){ e.preventDefault() } } } </script>
這里還有一點(diǎn)是我不需要上下箭頭的微調(diào),所以用css樣式將上下箭頭隱藏掉,給el-input設(shè)置類名no-controls,代碼如下:
:deep.no-controls input::-webkit-inner-spin-button,
:deep.no-controls input::-webkit-outer-spin-button{
-webkit-appearance: none !important;
}
:deep.no-controls input[type=“number”]{
-moz-appearance: textfield;
}
到此這篇關(guān)于el-input設(shè)置后綴顯示單位并阻止?jié)L輪微調(diào)的解決方法的文章就介紹到這了,更多相關(guān)el-input設(shè)置后綴顯示單位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目中頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08解決vue 更改計(jì)算屬性后select選中值不更改的問(wèn)題
下面小編就為大家分享一篇解決vue 更改計(jì)算屬性后select選中值不更改的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue3+vite引入插件unplugin-auto-import的方法
這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值?,需要的朋友可以參考下2022-10-10Vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08vue數(shù)組動(dòng)態(tài)刷新失敗問(wèn)題及解決
這篇文章主要介紹了vue數(shù)組動(dòng)態(tài)刷新失敗問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例
這篇文章主要給大家介紹了關(guān)于Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例的相關(guān)資料,該scrollIntoView()方法將調(diào)用它的元素滾動(dòng)到瀏覽器窗口的可見(jiàn)區(qū)域,需要的朋友可以參考下2023-12-12vue $mount 和 el的區(qū)別說(shuō)明
這篇文章主要介紹了vue $mount 和 el的區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09Element實(shí)現(xiàn)動(dòng)態(tài)增加多個(gè)輸入框并校驗(yàn)
本文主要介紹了Element實(shí)現(xiàn)動(dòng)態(tài)增加多個(gè)輸入框并校驗(yàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07Vue自定義指令實(shí)現(xiàn)卡片翻轉(zhuǎn)功能
這篇文章主要給大家介紹了Vue自定義指令實(shí)現(xiàn)卡片翻轉(zhuǎn)功能的代碼示例,文章通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的參幫助,需要的朋友可以參考下2023-11-11vue3中如何用threejs畫(huà)一些簡(jiǎn)單的幾何體
最近學(xué)習(xí)threejs有些時(shí)間了,就想著著手做些東西,下面這篇文章主要給大家介紹了關(guān)于vue3中如何用threejs畫(huà)一些簡(jiǎn)單的幾何體的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03