需求:一个加分扣分的需求,当输入时可以输入小数点,不进行四舍五入并只能保留小数点一位

前提:个人是在uni-number-box 组件中进行二次修改的,下面进行完善的组件代码展示!

<template><view class="uni-numbox"><view @click="_calcValue('minus')" class="uni-numbox__minus" :style="{'background-color': (inputValue <= min || disabled ? '#F8F8F8' : 'rgb(255, 109, 109)')}"><text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text></view><input :disabled="disabled" @input="onKeyInput" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" /><view @click="_calcValue('plus')" class="uni-numbox__plus" :style="{'background-color': (inputValue >= max || disabled ? '#F8F8F8' : 'rgb(0,179,15)')}"><text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text></view></view>
</template>
<script>/*** NumberBox 数字输入框* @description 带加减按钮的数字输入框* @tutorial https://ext.dcloud.net.cn/plugin?id=31* @property {Number} value 输入框当前值* @property {Number} min 最小值* @property {Number} max 最大值* @property {Number} step 每次点击改变的间隔大小* @property {Boolean} disabled = [true|false] 是否为禁用状态* @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value*/export default {name: "UniNumberBox",props: {value: {type: [Number, String],default: 1},min: {type: Number,default: 0},max: {type: Number,default: 100},step: {type: Number,default: 1},disabled: {type: Boolean,default: false}},data() {return {inputValue: 0,vlues:'',};},watch: {value(val) {/*此处为第三处新增代码通过监听我们可以知道当用户 默认第一次上来时我们会获得值 给的默认值然后我们进行判断 给默认值添加.0操作 例如:1.0 ; -1.0;*/let y = String(val).indexOf(".");//获取小数点的位置if(y == -1){//重新赋值this.$nextTick(()=>{this.inputValue = val + '.0';});if(this.inputValue == 0){this.inputValue = 1+'.0';}if(val == -1){this.inputValue = -1+'.0';}}else{this.inputValue = +val;}},inputValue(newVal, oldVal) {if (+newVal !== +oldVal) {this.$emit("change", newVal);}}},created() {this.inputValue = +this.value;},methods: {//输入框实时获取输入内容onKeyInput: function(event) {this.vlues = event.target.value;},//加分 减分操作(minus:减分;plus:加分)_calcValue(type) {if (this.disabled) {return;}const scale = this._getDecimalScale();let value = this.inputValue * scale;let step = this.step * scale;if (type === "minus") {value -= step;if (value < (this.min * scale)) {return;}if (value > (this.max * scale)) {value = this.max * scale}} else if (type === "plus") {value += step;if (value > (this.max * scale)) {return;}if (value < (this.min * scale)) {value = this.min * scale}}/*此处为个人新增代码 首先拿到当前值的长度 因需求 加减分数不超过99当我们将numer转成字符串后就可以知道了字符的长度举例:因为有负数 -11.1 正数:11.1 所以判断 当大于5时就出现了偶然性的11.111            这时我们通过toFixed()方法告诉它我们只保留小数点一位*/if((value+'').length > 5){value = value.toFixed(1); //toFixed保留小数点位数方法 }this.inputValue = String(value / scale);},_getDecimalScale() {let scale = 1;// 浮点型 if (~~this.step !== this.step) {scale = Math.pow(10, (this.step + "").split(".")[1].length);}return scale;},_onBlur(event) {let value = event.detail.value;if (!value) {return;}value = +value;if (value > this.max) {value = this.max;} else if (value < this.min) {value = this.min;}this.inputValue = value;/*此处为新增代码第二处这里判断主要是在输入的时候进行处理,告诉它我们只要小数点一位就可以这个判断有点没                啥意思了可以去掉判断 直接放上重复的代码(这个判断有点脱裤子放屁多此一举了)*/if(value > 0 ){event.target.value = event.target.value.match(/\d+(\.\d{0,1})?/)[0];}else{event.target.value = -event.target.value.match(/\d+(\.\d{0,1})?/)[0];}//重新赋值给inputthis.$nextTick(() => {this.inputValue = event.target.value;})}}};
</script>
<style scoped>/* #ifdef APP-NVUE *//* #endif */.uni-numbox {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;height: 35px;line-height: 35px;width: 120px;}.uni-numbox__value {background-color: #ffffff;width: 40px;height: 35px;text-align: center;font-size: 32rpx;border-width: 1rpx;border-style: solid;border-color: #e5e5e5;border-left-width: 0;border-right-width: 0;}.uni-numbox__minus {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;align-items: center;justify-content: center;width: 35px;height: 35px;/* line-height: $box-line-height;*//* text-align: center;*/font-size: 20px;color: #333;border-width: 1rpx;border-style: solid;border-color: #e5e5e5;border-top-left-radius: 6rpx;border-bottom-left-radius: 6rpx;border-right-width: 0;}.uni-numbox__plus {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;align-items: center;justify-content: center;width: 35px;height: 35px;border-width: 1rpx;border-style: solid;border-color: #e5e5e5;border-top-right-radius: 6rpx;border-bottom-right-radius: 6rpx;border-left-width: 0;}.uni-numbox--text {font-size: 40rpx;color: #FFF;}.uni-numbox--disabled {color: #c0c0c0;}
</style>
<!-- 四舍五入
// var f = parseFloat(event.target.value);
// if (isNaN(f)) {
//  return false;
// }
// var f = event.target.value;
// var s = f.toString();
// var rs = s.indexOf('.');
// if (rs < 0) {
//   rs = s.length;
//   s += '.';
// }
// //拼接小数位数  在此处修改 小数位数
// while (s.length <= rs + 1) {
//       s += '0';
// }
// event.target.value = s; -->

父界面调用自组件代码展示

<template><view><uni-number-box :disabled="scoringType == 3 ? true : false" :key="keyup"   :value="defaultNum" :min="minNum" :max="maxNum" @change="changeScore"></uni-number-    box></view>
</template><script>let _self;import {mapState,mapMutations} from 'vuex';import uniNumberBox from "@/components/public/uni-number-box.vue";export default {data() {return {defaultNum:""}},computed: {...mapState(['StudentsList'])},onLoad(e) {_self = this;},onReady() {},methods: {//分数改变回调changeScore(e) {this.score = e;this.defaultNum = e;},//获取星期dayfz(obj) {var arys1 = objif (arys1) {var moth = arys1.split(" ");var s = moth[0];var Y = s.replace("年", "-");var M = Y.replace("月", "-");var D = M.replace("日", "")var day = "星期" + "日一二三四五六".charAt(new Date(D).getDay());return day;}},},components: {uniNumberBox}}
</script><style lang="scss" scoped></style>

仅作为一次个人的遇到的项目需求记录(如果有幸能帮到大家希望大佬们给点个赞);

uniapp input输入框(小数点输入保留一位小数)相关推荐

vue 保留三位小数_vue input框type=number 保留两位小数自定义组件
第一步:自定义组件MyNumberInput.vue export default { props: { point: { default: 0 }, max: Number, placeholder ...
php格式化显示8位小数点,PHP保留2位小数格式化小数、浮点数
JS保留两位小数例子四舍五入使用函数 toFixed() document.write(" JS保留两位小数例子 "); var a=2.1512131231231321; do ...
input输入框匹配数字(带两位小数) js--金额匹配
input输入框匹配两位小数的金额,超过部分或者其他非数字和小数点字符不显示,小数点只能输入一次,第二次不能输入,代码: <input type="text" onkeyup ...
html输入框2位小数,input输入框数字限制（2位小数，含0的正整数）
小弟因为长期从事后台服务端开发.对页面越来越生疏..近期领导就要求修改一个后台管理端.是关于input输入限制的金额得..脑阔疼..好不容易写出来,还是前端人员帮忙写的.赶紧记录下.以后要好好研究一下 ...
JAVA字符串数学公式运算-辅助类-支持浮点数错误纠正-低消耗-高可用性-小数点后面保留16位小数
//计算辅助类·基础计算 public class ArithHelper {// 默认除法运算精度private static final int DEF_DIV_SCALE = 16;// 这个类 ...
php 小数点乘法,js小数点数字相乘、把小数点四舍五入保留两位小数
//小数点数字相乘 function accMul(arg1,arg2){ var m=0,s1=arg1.toString(), s2=arg2.toString(); try{ m+=s1.spl ...
正则只能输入数字，一个小数点，第一位不能为小数点，保留两位小数，为正数，比较全的正则...
下面是五个正则合到一起的一个正则表达式 this.options.formData[8].value = value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, ...
输入框限制输入为两位小数
在utils/test.js中, export function toFixedStr(str) { let float = str.split(".")[0]; str = st ...
php除以100保留两位小数点,php保留两位小数的几种方法介绍
1.不进位的情况比如3.149569取小数点后两位,最后两位不能四舍五入.结果:3.14. 可以使用 floor 函数该函数是舍去取整.例如,floor(4.66456) 结果:4 . floor ...

uniapp input输入框(小数点输入保留一位小数)

需求:一个加分扣分的需求,当输入时可以输入小数点,不进行四舍五入并只能保留小数点一位

父界面调用自组件代码展示

仅作为一次个人的遇到的项目需求记录(如果有幸能帮到大家希望大佬们给点个赞);

uniapp input输入框(小数点输入保留一位小数)相关推荐

最新文章

热门文章