解决iView中InpuNuber限定小数位时，输入光标经常后移的问题

最新推荐文章于 2025-02-21 11:44:24 发布
最新推荐文章于 2025-02-21 11:44:24 发布
阅读量3.7k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Sophie_U/article/details/84030643

问题场景：

  • InputNumber组件在设置precision精度后，每次输入都会自动填充导致光标后移，影响输入体验。
<InputNumber :precision="2" :min="0.01" style="width:100%" v-model="value"/>

期待效果：

  • 如输入1.22就直接输入而不是出现输入1，变为1.00的情况。

原因：

  • 在iView的InputNumber组件中，对数字精度precision的验证是直接用toFixed(2)以后的值替换的，才导致每次输入都会被新值所覆盖

解决：

  • 修改源码。（简单粗暴，需谨慎）
//重写iview InputNumber浮点方法
iView.InputNumber.computed.precisionValue = function (
最低0.47元/天 解锁文章

200万优质内容无限畅学
iview数字输入框再封装（4.0.0以上版本）
11-24
封装了一下iview的数字输入框 封装内容： 1.添加聚焦功能 2.设置精度的情况下，避免输入时实时格式化精度，只有在焦点离开后格式化精度【offRyStyle控制功能开关】 3.添加设置数字居右显示【textAlign】 4.默认设置最大最小值
解决iView中时间控件选择的时间总是少一天的问题
08-27
然而，在使用 iView 的时间控件时，经常会遇到一个问题，即选择的时间总是少一天。这是因为 iView 的时间控件默认使用 UTC 时间，而不是本地时间。下面我们将详细介绍这个问题的解决方案。 问题的原因 ------------...
iview InputNumber输入光标跳转precision精度
sophia
12-16 1329
设置active-change="false"完美解决问题，在博客上看了好多肺功能啊，浪费时间 <InputNumber :active-change="false" :max="9999999999" :min="1" :precision="2" v-model.number="vehicleForm.money" style="width:100%"></InputNumber> ...
iview中InputNumber的小数点位数控制（因为iview中precision属性在输入数字时会自动补全影响体验度，故封装了一个方法）
热门推荐
weixin_43735788的博客
05-21 1万+
data () { return { myNumber: 0 } } // data中定义数据 //组件 <InputNumber placeholder="请输入..." v-model="myNumber " @on-change="testChange"> </InputNumber> methods: { testChange () { // 该方法在...
解决iview打包时UglifyJs报错的问题
10-18
在使用iview库进行前端开发的打包过程中，我们经常遇到由于Webpack配置不当导致UglifyJs插件报错的问题。UglifyJs是一个JavaScript代码压缩工具，它可以减小文件大小，提高加载速度，同时去除无效代码、注释等，但不...
完美解决iview 的select下拉框选项错位的问题
08-27
在使用iview的过程中，我们可能会遇到select下拉框选项错位的问题，当弹出框超过一屏需要滚动时，select的下拉选项会出现错位。这种问题的出现可能是由于iview组件的样式设置引起的。 在iview中，select下拉框组件...
iView中的input文本输入框只允许输入4位数字，格式校验后再发送请求做别的校验
m0_51608940的博客
11-14 2295
iView中的input文本输入框只允许输入4位数字的校验 <template> <div> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <FormItem label="工号" prop="jobNumber"> <Input v-model="formValidate.jobNumbe
iview2.0 InputNumber 保留两位小数
[小程序]实现点击弹出提示框，点击其他区域关闭
01-27 2358
@iview2.0 InputNumber 保留两位小数 iview2.0 InputNumber 保留两位小数 使用 parseFloat 配合Math.floor ，单独使用Math.floor(value*100)/100效果不是很好 <Input-number size="small" :min="0" :formatter="value => `${parseFloat(Math.floor(value*100)/100)}`" v-model="scope.row.impurest
iview（View）ui框架中的inputNumber数字输入框数字精度(.00)取消显示常用方法
最新发布
qq_51758070的博客
02-21 274
iview（View）ui框架中的inputNumber数字输入框数字精度(.00)取消显示常用方法----需求是需要保留两位小数，但若为整数时，不保留(.00)数字。
完美的数字输入框，只能输入两位小数点以千分位分隔，解决iview inputnumber输入光标跳转问题
sophia
12-16 1720
注意UI框架用的是iview <InputNumber :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="value => value.replace(/\$\s?|(,*)/g, '')" :active-change="false" :max="99999999.99" :min="1" :precision="2" v-model.number="vehicleForm.mo
iView中InpuNumber限定小数位最佳实践，其他都是垃圾
前端人公众号作者
04-01 2290
1、Vue进阶手册 2、vue实战企业后台视频教程 3、前端面试手册 4、Css进阶手册 5、HTML5电子书 6、ES6进阶手册 后续好的资源会在这持续更新 ...
vue + iview inputNumber 数字输入框踩坑（即设置 max 后输入还能输入超过最大值内容）
qq_41639443的博客
05-19 3133
vue + iview inputNumber 数字输入框踩坑（即设置 max 后输入还能输入超过最大值内容） 在 table 组件中嵌套使用时 当在 table 组件中嵌套使用时，在 render 中自定义内容，在 props 中设置输入的max 、min 和 step，然后监听输入的变化，设置最大值和最小值，此处以设置最大值为例： //poorColumns为table组件绑定的column poorColumns: [ { title: "考评项目",
iview InputNumber 设置只能填写整数
ding43930053的专栏
09-05 596
/ 如果不是整数，则将值设置为上一次的有效值。// 检查输入值是否为整数。
iview inputNuber输入会导致跳的问题
weixin_30791095的博客
08-15 238
转载于:https://www.cnblogs.com/yn-cn/p/11358758.html
vue + iview inputNumber最大最小值限制问题
su_sf99的博客
12-31 541
FormItem label="访问次数" style="width:360px" prop="ShortFrequency" >限制最大值最小值设置active-change="false" 失去焦点去设置限制可以解决不生效的问题。precision=“0”是确定输入的精确度，为0时表示只能输入整数。<InputNumber/>限制输入最大值最小值不生效。
iview 数字输入框 精确到数字小数点后4位
qq_39396760的博客
08-27 877
最近单页面重构了下政府项目（原jq+fineUI） 现cdn引入vue，iview 涉及到金额输入 后面保留小数点 iview 中数字输入框 precision 没有案例 网上风评有点不好 所以找了个方法，又只能对单个数字输入框有效 所以魔改了方法，如下图 使用流程 数字输入框 v-model 绑定 然后用on-change 在on-chage 里赋值 希望对你有用 ...
el-input自定义封装 ( 输入框只能输入数字 )
lwg112233的博客
12-23 1379
/* * 自定义指令 - 输入框限制 只能输入数字（可限制最大、最小、小数点后保留的位数） * 使用方法 * 将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可； * 给el-input加上v-onlynumber即可。 * 指令参数 max 限制最大输入（可选） min 限制最小输入（可选） precision 保留小数点位数（可选，默认为0位） * 例： * 无参数 <el-input v-onlynumber> * 有...
iview inputnumber保留两位小数
01-22
### 实现 iView InputNumber 组件保留两位小数 为了使 `iView` 的 `InputNumber` 组件能够始终显示并保持两位小数，可以通过监听输入事件来处理用户的输入，并确保每次更新模型时都格式化为带有两位小数的有效数值。 下面是一个具体的解决方案： #### 方法一：使用自定义验证函数 可以在组件内部创建一个方法用于截取到指定的小数位数，在用户改变输入框中的值之后调用此方法来进行修正[^1]。 ```html <template> <div id="app"> <!-- 使用 @change 或者 @input 来触发 formatValue --> <InputNumber :min="0" :max="999999" v-model="num" @input="formatValue"></InputNumber> </div> </template> <script> export default { name: "App", data() { return { num: '' }; }, methods: { // 定义一个方法用来控制精度 formatValue(newVal) { if (newVal !== undefined && newVal !== '') { this.num = parseFloat(parseFloat(this.num).toFixed(2)); } } } }; </script> ``` 这种方法利用了 JavaScript 中的 `parseFloat()` 和 `toFixed()` 函数组合来达到目的。每当用户更改输入框内的内容时都会执行该逻辑，从而保证最终保存下来的总是精确到了第二位小数的结果。 #### 方法二：直接绑定计算属性 另一种方式是通过 Vue.js 提供的数据双向绑定机制配合计算属性完成同样的效果。这种方式更加简洁明了[^2]。 ```html <template> <div id="app"> <InputNumber :min="0" :max="999999" v-model="formattedNum"></InputNumber> </div> </template> <script> export default { name: "App", computed: { formattedNum: { get() { return Number.parseFloat(this.num).toFixed(2); }, set(newValue) { this.num = newValue; } } }, data() { return { num: '' // 存储原始未格式化的数字字符串 }; } }; </script> ``` 这里的关键在于 `computed` 属性下的 getter/setter 对象形式的应用。当页面渲染时会自动获取经过格式化后的版本；而一旦发生新的赋值操作，则会将新值重新分配给实际存储变量 `this.num` ，形成闭环管理。 这两种方案都可以有效地让 `iView` 的 `InputNumber` 组件支持固定长度的小数点表示法。选择哪种取决于个人偏好以及具体应用场景的需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sophie_U

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值