完美解决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-cli配置flexible过程详解
这篇文章主要介绍了vue-cli配置flexible过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
vue中使用vue-qriously插件生成二维码
集成vue-cli脚手架里面的二维码插件貌似很多，一般都会满足大部分需求，这次就讲一下插件vue-qriously生成二维码效果，感兴趣的朋友一起看看吧
2022-04-04
vue 动态改变静态图片以及请求网络图片的实现方法
下面小编就为大家分享一篇vue 动态改变静态图片以及请求网络图片的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue.js 父向子组件传参的实例代码
这篇文章主要介绍了vue.js 父向子组件传参的实例代码,需要的朋友可以参考下
2017-10-10
vue组件historyApiFallback作用详解
这篇文章主要为大家介绍了vue组件historyApiFallback作用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
vue前端信息详情页模板梳理详解
这篇文章主要为大家详细介绍了vue前端信息详情页模板梳理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue3实现简易音乐播放器组件
这篇文章主要为大家详细介绍了Vue3实现简易音乐播放器组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
vue3中的elementPlus全局组件中文转换方式
这篇文章主要介绍了vue3中的elementPlus全局组件中文转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue模拟实现购物车结算功能
这篇文章主要为大家详细介绍了Vue模拟实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
Vue 数据绑定的原理分析
这篇文章主要介绍了Vue 数据绑定的原理，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-11-11