完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題
更新時間：2022年10月13日 10:26:35 作者：程序員筆記--vue
這篇文章主要介紹了完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
element-ui的el-input， 設(shè)置type="number"后，后邊會多一個上下箭頭，并且在中文輸入法輸入數(shù)據(jù)的時候，光標(biāo)上移?。?/p>
前端的強(qiáng)迫癥啊 （憑啥你這輸入框和別人的不一樣， 憑啥你光標(biāo)就上移了， 你就不能正常點?。。。?/p>
so，解決一下
1. 解決掉上下箭頭
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
::v-deep input[type='number'] {
-moz-appearance: textfield !important;
}2. 解決掉光標(biāo)上移問題
.el-input__inner {
line-height: 1px !important;
}elementui中el-input類型設(shè)置為number類型
當(dāng)需要驗證的字段是數(shù)字類型的時候，需要使用 v-model.number 來綁定，否則驗證的時候會當(dāng)做字符串處理，結(jié)果就無法驗證
<el-input v-model.number="tax.salary"></el-input>
rules里面：
salary: [{required: true, message: '請輸入工資',type:'number', trigger: 'blur'}],到此這篇關(guān)于完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題的文章就介紹到這了,更多相關(guān)element-ui number類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用 vue 實例更好的監(jiān)聽事件及vue實例的方法
這篇文章主要介紹了使用 vue 實例更好的監(jiān)聽事件及vue實例的方法,介紹了一種新增 vue 實例的方法，單獨監(jiān)聽事件，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
Element Notification通知的實現(xiàn)示例
這篇文章主要介紹了Element Notification通知的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Vue項目通過network的ip地址訪問注意事項及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
下面小編就為大家分享一篇vue-star評星組件開發(fā)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
利用vuex-persistedstate將vuex本地存儲實現(xiàn)
這篇文章主要介紹了利用vuex-persistedstate將vuex本地存儲的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中的計算屬性和偵聽屬性，幫助大家更好的理解和學(xué)習(xí)vue框架的使用，感興趣的朋友可以了解下2020-11-11
淺析vue cli3 封裝Svgicon組件正確姿勢(推薦)
這篇文章主要介紹了vue cli3 封裝Svgicon組件正確姿勢,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決
這篇文章主要介紹了誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中Echarts使用動態(tài)數(shù)據(jù)的兩種實現(xiàn)方式
這篇文章主要介紹了vue中Echarts使用動態(tài)數(shù)據(jù)的兩種實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家介紹了vue使用Swiper踩坑及解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05