完美解决element-ui的el-input设置number类型后的相关问题
更新时间：2022年10月13日 10:26:35 作者：程序员笔记--vue
这篇文章主要介绍了完美解决element-ui的el-input设置number类型后的相关问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
element-ui的el-input， 设置type="number"后，后边会多一个上下箭头，并且在中文输入法输入数据的时候，光标上移！！
前端的强迫症啊 （凭啥你这输入框和别人的不一样， 凭啥你光标就上移了， 你就不能正常点！！！）
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类型
当需要验证的字段是数字类型的时候，需要使用 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类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在Vue核心中除了响应式原理外,视图渲染也是重中之重,下面这篇文章主要给大家介绍了关于Vue组件的渲染流程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了vue组件实现移动端九宫格转盘抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
本篇文章主要介绍了Vue.nextTick 的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家详细介绍了Vue如何结合Element实现页面生成快照截图功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
本文以校验两次密码的一致性应用，给出两个可变属性值的字段之间的联合校验的典型解决方案，通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现，需要的朋友一起看看吧2021-07-07
本文主要介绍了vue-element-admin下载到登录的一些坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了Vue 之孙组件向爷组件通信的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue中怎么区分不同的环境，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue3 hook自动导入的原理,介绍了API的自动导入及组件的自动导入，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
Fragment 占位组件不生成标签与路由组件lazyLoad案例
这篇文章主要为大家介绍了Fragment 占位组件不生成标签与路由组件lazyLoad案例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论