输入框限制只能输入数字,正数、负数、0,最多两位小数;数字输入框可以输入负数,并最多保留两位小数;el-number-input去掉四舍五入和自动补齐小数;

场景:
–要求1:输入框只能输入数字,可以使正数、负数、0,小数点最多保留两位。
–要求2:不需要自动补齐小数点,也不需要自动四舍五入。

element-ui的数字输入框el-input-number只能满足要求1,所以在原有的基础上做修改即可;
下图的第一个输入框就是没改动的数字输入框;第二个是修改后的满足需求1和需求2;

在这里插入图片描述

以下代码可以直接复制使用!

<template><div><!-- 默认数字输入会自动补齐小数点 还会自动四舍五入 --><el-input-number v-model="num5" :precision="2" :step="0.01" :max="10" placeholder="0正负数 最多两位小数"></el-input-number><!-- 去掉加减按钮 去掉自动补齐小数点属性precision 去掉四舍五入 --><el-input-number v-model="num6" :step="0.01" placeholder="0正负数 最多两位小数" class="num_input" @input.native="changeInputPt2($event)"></el-input-number></div>
</template><script>
export default {data () {return {num5: undefined,num6: undefined}},methods: {changeInputPt2 (e) {console.log(e.target.value)if ((e.target.value.indexOf('.') >= 0)) {e.target.value = e.target.value.substring(0, e.target.value.indexOf('.') + 3) // 这里采用截取 既可以限制第三位小数输入 也解决了数字输入框默认四舍五入问题}console.log(e.target.value)}}
}
</script><style lang="less" scoped>
.num_input {/deep/.el-input-number__decrease,/deep/.el-input-number__increase {display: none !important;}/deep/.el-input__inner {padding: 0 !important;}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403240.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【工具】Win 7/8/10 下使用 VC++6.0

Microsoft Visual C&#xff08;也就是 MSVC或者VC&#xff09;&#xff0c;是大部分计算机专业学生接触的第一款编译器。它具有轻量&#xff0c;界面简洁等优点&#xff0c;也是许多计算机考试的指定工具。VC6.0已经推出近20年&#xff0c;仍旧深受许多编程人员的喜爱&#xf…

【maven3学习之一】window7下maven环境搭建

2019独角兽企业重金招聘Python工程师标准>>> 软件准备&#xff1a; jdk-7u10-windows-i586 apache-maven-3.0.4-bin maven介绍&#xff1a; 按照一般的套路老说应该要说明一下maven&#xff0c;觉得maven就是一个项目管理的框架&#xff0c;因为之前的一个项目对mav…

解决去除“请输入有效值。两个最接近的有效值分别为1和2“提示

场景&#xff1a;el-input输入框&#xff0c;hover上去会有"请输入有效值。两个最接近的有效值分别为1和2"提示。 只需要给el-input加上属性 :step“0.01” 即可&#xff0c;注意精确度与你的小数点位数有关。也就是说如果你是三位小数点&#xff0c;那就是:step“0.…

【贪心】Vijos P1615 旅行

题目链接&#xff1a; https://vijos.org/p/1615 题目大意&#xff1a; N条路&#xff0c;路的高度给你&#xff0c;走一条路的耗费体力是从上一条路的高度到当前路高度的绝对值差。 可以改变一条路的高度&#xff0c;耗费的体力等于改变前后的路高度差。求最小耗费体力。 题目…

向 Web 开发人员推荐35款 JavaScript 图形图表库

From: http://www.cnblogs.com/lhb25/p/35-javascript-chart-and-graph-libraries.html 图表是数据图形化的表示&#xff0c;通过形象的图表来展示数据&#xff0c;比如条形图&#xff0c;折线图&#xff0c;饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据&#xff…

解决列表某项文字过度过多 需要自适应撑开高度展示 其他项目按照行高居中

解决列表某项文字过度过多 需要自适应撑开高度展示 其他项目按照行高居中 以下代码可直接复制&#xff1a; 两种方法&#xff1a;分别是方法1&#xff1a;bfc配合浮动撑高 其他项目子绝父相 方法二&#xff1a;第一项也是相对定位&#xff08;不推荐&#xff09; <templat…

uni-app更新某个组件版本;uni-app更新插件版本;uni-app更新uni_modules插件;uni-app小程序更新某一个组件的版本库

uni-app官方介绍的更新某一个组件的uni_modules方法 注意&#xff1a;本篇只是记录更新uni-app的组件库下某一个组件的版本。不是更新微信小程序版本。 场景原因&#xff1a;项目最初是去年开发的&#xff0c;当时下载了uni-app的自带组件库。但是时间筛选器uni-datetime-picke…

课文《小站》

小站 --作者&#xff1a;袁鹰 这是一个铁路线上的小站&#xff0c;只有慢车才停两三分钟。快车疾驰而过&#xff0c;旅客们甚至连站名还来不及看清楚。 就在这一刹那&#xff0c;你也许看到一间红瓦灰墙的小屋&#xff0c;一排漆成白色的小栅栏&#xff0c;或者还有三五个人影…

wordpress在新窗口打开留言者链接

为什么80%的码农都做不了架构师&#xff1f;>>> 没有什么技术含量可言&#xff0c;网上早有高手支招&#xff0c;但其方法在我现在使用的inove主题下不行&#xff0c;于是自己研究了下代码&#xff0c;完美解决&#xff0c;分享一下&#xff1a; 一般主题都可以这…

vue上传图片加水印;js上传图片添加水印;vue给图片添加水印;canvas图片添加水印;canvas画布导出图片

uni-app微信小程序图片加水印&#xff0c;点击看这篇 需求场景&#xff1a; 要求上传图片&#xff0c;并给图片添加水印。传给后端的也是有水印的图片。 逻辑步骤&#xff1a; 通过input上传图片&#xff0c;拿到图片的信息和base64&#xff0c;将图片绘制到画布上&#xff0c;…

The path is not a valid path to the xx-generic kernel headers

如果在安装 VMware Tools 的过程中弹出该选项&#xff0c;按照以下步骤进行操作&#xff1a; 1. 检查系统内是否已经安装好相应的 kernel headers&#xff0c;比如我的系统&#xff1a; 如果没有该目录的话&#xff0c;那么需要安装以下资源&#xff1a; sudo apt-get instal…

库-libuv:概述

From&#xff1a; http://blog.chinaunix.net/uid-28458801-id-4464173.html libuv 是 Node 的新跨平台抽象层&#xff0c;用于抽象 Windows 的 IOCP 及 Unix 的 libev。作者打算在这个库的包含所有平台的差异性。特性&#xff1a;非阻塞 TCP 套接字非阻塞命名管道UDP定时器子进…

input上传图片;input上传file;vue上传图片。js读取文件的base64;通过File文件读取base64;

本篇是通过File文件来获取base64的&#xff1b;如果需要 通过文件url获取base64看这篇 需求&#xff1a;上传图片并获取base&#xff0c;用的是input file功能上传 注意点&#xff1a;input上传相同文件不触发的原因。需要将inputDOM.value null (不过置空后 29行的打印 就看不…

C#WinForm WebBrowser (二) 实用方法总结

实用方法1&#xff1a;获取状态栏信息 void webBrowser1_StatusTextChanged(object sender, EventArgs e){ label1.Text webBrowser1.StatusText;} 实用方法2&#xff1a;页面跳转后改变地址栏地址//在Navigated事件处理函数中改变地址栏地址是最恰当的&#xff1a;private…

虚拟机找不到/mnt/hgfs挂载目录

如果在安装好 VMware Tools 并在设置里面设定好共享目录之后仍然找不到 /mnt/hgfs 默认挂载目录&#xff0c;那么尝试以下步骤&#xff1a;1. 确认VMware Tools 和共享目录设定已经完成&#xff1a;2. 如果操作结果如上所示&#xff0c;那么表示前提条件准备充足啦&#xff0c;…

pdf上传及预览;file上传pdf文件及预览;vue上传pdf文件及预览;vue-pdf预览pdf文件

需求&#xff1a;上传pdf文件&#xff0c;并点击可以打开预览。使用input的file功能即可完成&#xff0c;预览只需要跳转到pdf的url地址即可。 1.使用iframe直接预览 2.vue-pdf参考 3.vue-pdf报错解决 以下代码可直接复制使用&#xff01;&#xff01;&#xff01;有效的可以点…

JS遍历对象或者数组

From: http://keshion.iteye.com/blog/728122 一.纯js实现 Js代码 <script> var obj {"player_id":"GS001","event_id":"1","destroy":"97%"}; var props ""; for(var p in obj){…

深入了解SEO

为什么要SEO&#xff0c;SEO的作用是什么&#xff1f;SEO&#xff08;Search Engine Optimization&#xff09;是为了让自己的IT产品优先能被搜索引擎找到&#xff0c;通过搜索引擎搜索推荐给网民浏览&#xff08;特点就是精准找到用户群体&#xff09;。正所谓&#xff0c;有用…

el-table表格fixed=“right“后表格错乱;Safari浏览器el-table表格错乱;Safari浏览器样式需改无效;

场景&#xff1a;el-table表格操作列右固定fixed“right”&#xff0c;导致表格错乱。其实是由于某行的字体太多&#xff0c;所导致操作列高度错乱。 至于Safari浏览器样式修改无效的问题&#xff1a;每次修改代码后&#xff0c;Safari浏览器项目刷新无变化&#xff0c;必须每次…

从零开始学习Node.js例子七 发送HTTP客户端请求并显示响应结果

From: http://www.cnblogs.com/EricaMIN1987_IT/p/3654233.html wget.js&#xff1a;发送HTTP客户端请求并显示响应的各种结果 options对象描述了将要发出的请求。 data事件在数据到达时被触发&#xff0c;error事件在发生错误时被触发。 HTTP请求中的数据格式通过MIME协议来声…