您现在的位置是：网站首页> 编程资料编程资料

完美解决element-ui的el-input设置number类型后的相关问题_vue.js_

2023-05-24 422人已围观

简介完美解决element-ui的el-input设置number类型后的相关问题_vue.js_

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 来绑定，否则验证的时候会当做字符串处理，结果就无法验证

rules里面：

salary: [{required: true, message: '请输入工资',type:'number', trigger: 'blur'}],

到此这篇关于完美解决element-ui的el-input设置number类型后的相关问题的文章就介绍到这了,更多相关element-ui number类型内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：vue中可以绑定多个事件吗_vue.js_

下一篇：关于delete和Vue.delete的区别及说明_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

完美解决element-ui的el-input设置number类型后的相关问题_vue.js_

elementui中el-input类型设置为number类型

相关内容

点击排行

本栏推荐

猜你喜欢