欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2024年09月13日 11:18:25   作者:快樂(lè)小土豆~~  
在Element UI或Element Plus中,使用el-input組件時(shí),可以通過(guò)suffix插槽添加單位顯示,如果設(shè)置了type為'number',滾輪滾動(dòng)可能會(huì)導(dǎo)致數(shù)值微調(diào),解決方法是阻止?jié)L輪事件的默認(rèn)行為,并用CSS隱藏掉輸入框的上下箭頭,確保數(shù)值輸入的準(zhǔn)確性,這樣既美觀又提升了用戶體驗(yàn)

項(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)文章

最新評(píng)論