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