el-input設置后綴顯示單位并阻止?jié)L輪微調的解決方法

更新時間：2024年09月13日 11:18:25 作者：快樂小土豆~~

在Element UI或Element Plus中,使用el-input組件時,可以通過suffix插槽添加單位顯示,如果設置了type為'number',滾輪滾動可能會導致數(shù)值微調,解決方法是阻止?jié)L輪事件的默認行為,并用CSS隱藏掉輸入框的上下箭頭,確保數(shù)值輸入的準確性,這樣既美觀又提升了用戶體驗

項目中收集form表單信息時，有時會需要在el-input后面顯示單位，效果如圖：

當然，我們可以直接在輸入框后面加上單位，但直接給輸入框上加單位不管是視圖上還是用戶體驗上看起來都要好一點

element-plus / element-ui給我們提供了對應插槽

圖中效果顯然是尾部內容，因此只需要使用suffix插槽即可實現(xiàn)該效果

<el-input v-model='data'>
	<template #suffix>元</template>
</el-input>

這里我要提一個額外的內容，由于我這里收集的是數(shù)字，因此我給el-input設置了type=‘number’，但總是不知道什么情況，有時輸入框中的數(shù)值比我輸入的有細微出入

其實，后來無意間發(fā)現(xiàn)是輸入框的滾輪滾動事件，一般給el-input添加了type='number’后，輸入框后面會出現(xiàn)上下兩個箭頭可以對數(shù)值進行微調。

如果鼠標光標在輸入框內并聚焦時，滾動滾輪也會微調數(shù)值，因此我就出現(xiàn)了這個問題，輸入完數(shù)值，此時鼠標還聚焦在輸入框內，滾動滾輪(因為我填寫內容較多這個頁面有滾動條需要滾動到上方/下方去填寫別的內容)，此時我輸入框中的數(shù)值就會因為我滾動滾輪進行了微調，出現(xiàn)數(shù)值與輸入的數(shù)值不一致

解決方法，就是阻止el-input滾輪事件的默認行為

<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>

這里還有一點是我不需要上下箭頭的微調，所以用css樣式將上下箭頭隱藏掉，給el-input設置類名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;
}

到此這篇關于el-input設置后綴顯示單位并阻止?jié)L輪微調的解決方法的文章就介紹到這了,更多相關el-input設置后綴顯示單位內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: