el-input設置后綴顯示單位并阻止?jié)L輪微調的解決方法
項目中收集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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
狀態(tài)管理也就是數(shù)據(jù)狀態(tài)管理，vue應用程序的各組件之間經(jīng)常需要進行通信，除了v-on、EventBus等通信方式外，可以采用數(shù)據(jù)共享的方式進行通信。這種簡單的數(shù)據(jù)共享模式就是store模式。2021-05-05
一次Vue中computed沒有觸發(fā)的原因以及排查經(jīng)歷
這篇文章主要介紹了一次Vue中computed沒有觸發(fā)的原因以及排查經(jīng)歷,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
ElementUI時間選擇器限制選擇范圍disabledData的使用
本文主要介紹了ElementUI時間選擇器限制選擇范圍disabledData的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
今天小編就為大家分享一篇Vue 通過公共字段,拼接兩個對象數(shù)組的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue列表循環(huán)從指定下標開始的多種方案,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
vue-cli單頁面預渲染seo-prerender-spa-plugin操作
這篇文章主要介紹了vue-cli單頁面預渲染seo-prerender-spa-plugin操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表固定列滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue3中使用setup通過ref獲取子組件的屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue?圖片監(jiān)聽鼠標滑輪滾動實現(xiàn)圖片縮小放大功能(實現(xiàn)思路)
其實想要實現(xiàn)功能很簡單，就是在一張圖片上監(jiān)聽鼠標滑輪滾動的事件，然后根據(jù)上滾還是下滾實現(xiàn)圖片的縮放，這篇文章主要介紹了Vue?實現(xiàn)圖片監(jiān)聽鼠標滑輪滾動實現(xiàn)圖片縮小放大功能,需要的朋友可以參考下2023-03-03
Vue 實現(xiàn)創(chuàng)建全局組件,并且使用Vue.use() 載入方式
這篇文章主要介紹了Vue 實現(xiàn)創(chuàng)建全局組件,并且使用Vue.use() 載入方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08