完美解決element-ui的el-input設置number類型后的相關問題
更新時間：2022年10月13日 10:26:35 作者：程序員筆記--vue
這篇文章主要介紹了完美解決element-ui的el-input設置number類型后的相關問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
element-ui的el-input， 設置type="number"后，后邊會多一個上下箭頭，并且在中文輸入法輸入數(shù)據(jù)的時候，光標上移！！
前端的強迫癥啊 （憑啥你這輸入框和別人的不一樣， 憑啥你光標就上移了， 你就不能正常點?。。。?/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. 解決掉光標上移問題
.el-input__inner {
line-height: 1px !important;
}elementui中el-input類型設置為number類型
當需要驗證的字段是數(shù)字類型的時候，需要使用 v-model.number 來綁定，否則驗證的時候會當做字符串處理，結果就無法驗證
<el-input v-model.number="tax.salary"></el-input>
rules里面：
salary: [{required: true, message: '請輸入工資',type:'number', trigger: 'blur'}],到此這篇關于完美解決element-ui的el-input設置number類型后的相關問題的文章就介紹到這了,更多相關element-ui number類型內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue-cli配置flexible過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
集成vue-cli腳手架里面的二維碼插件貌似很多，一般都會滿足大部分需求，這次就講一下插件vue-qriously生成二維碼效果，感興趣的朋友一起看看吧2022-04-04
vue 動態(tài)改變靜態(tài)圖片以及請求網(wǎng)絡圖片的實現(xiàn)方法
下面小編就為大家分享一篇vue 動態(tài)改變靜態(tài)圖片以及請求網(wǎng)絡圖片的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue.js 父向子組件傳參的實例代碼,需要的朋友可以參考下2017-10-10
這篇文章主要為大家介紹了vue組件historyApiFallback作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家詳細介紹了vue前端信息詳情頁模板梳理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了Vue3實現(xiàn)簡易音樂播放器組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vue3中的elementPlus全局組件中文轉換方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了Vue模擬實現(xiàn)購物車結算功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue 數(shù)據(jù)綁定的原理，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11