Element-UI 数字类型输入框

文章目录

  • 前言
  • 定义css
  • 使用


前言

在element-ui中,我们可以使用el-input-number组件来定义只可数值类型,并修改组件样式,详情参考文章:修改el-input-number计数器对齐方式

使用el-input-number组件,可以轻松限定输入类型,也可以通过添加:precision="0"属性来定义只可输入整数,比如查询ID等类型。但是这种方式似乎有点麻烦,因为它仍然允许输入其他字符,比如输入10.55,结果会变成11;输入字符,结果会变回原来的值。

如果想要实现只可输入数字的值,并且无需校验等繁琐操作,下文将进行讲解。


定义css

以下css代码是一个Vue组件中的样式代码,用于修改input元素在不同浏览器中的外观。

具体步骤如下:

  • 选择所有input元素的::-webkit-outer-spin-button和::-webkit-inner-spin-button伪元素,并将它们的外观

你可能感兴趣的:(Vue,ui,javascript)