完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題
element-ui的el-input， 設(shè)置type="number"后，后邊會(huì)多一個(gè)上下箭頭，并且在中文輸入法輸入數(shù)據(jù)的時(shí)候，光標(biāo)上移??！
前端的強(qiáng)迫癥啊 （憑啥你這輸入框和別人的不一樣， 憑啥你光標(biāo)就上移了， 你就不能正常點(diǎn)！?。。?/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)需要驗(yàn)證的字段是數(shù)字類型的時(shí)候，需要使用 v-model.number 來綁定，否則驗(yàn)證的時(shí)候會(huì)當(dāng)做字符串處理，結(jié)果就無法驗(yàn)證
<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 實(shí)例更好的監(jiān)聽事件及vue實(shí)例的方法
這篇文章主要介紹了使用 vue 實(shí)例更好的監(jiān)聽事件及vue實(shí)例的方法,介紹了一種新增 vue 實(shí)例的方法，單獨(dú)監(jiān)聽事件，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
Element Notification通知的實(shí)現(xiàn)示例
這篇文章主要介紹了Element Notification通知的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue項(xiàng)目通過network的ip地址訪問注意事項(xiàng)及說明
這篇文章主要介紹了Vue項(xiàng)目通過network的ip地址訪問注意事項(xiàng)及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
下面小編就為大家分享一篇vue-star評星組件開發(fā)實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
利用vuex-persistedstate將vuex本地存儲(chǔ)實(shí)現(xiàn)
這篇文章主要介紹了利用vuex-persistedstate將vuex本地存儲(chǔ)的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中的計(jì)算屬性和偵聽屬性，幫助大家更好的理解和學(xué)習(xí)vue框架的使用，感興趣的朋友可以了解下2020-11-11
淺析vue cli3 封裝Svgicon組件正確姿勢(推薦)
這篇文章主要介紹了vue cli3 封裝Svgicon組件正確姿勢,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決
這篇文章主要介紹了誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中Echarts使用動(dòng)態(tài)數(shù)據(jù)的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了vue中Echarts使用動(dòng)態(tài)數(shù)據(jù)的兩種實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家介紹了vue使用Swiper踩坑及解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05