146 lines
2.8 KiB
Vue
146 lines
2.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="numberValue">
|
|||
|
|
<view class="fuHao" @click="calculate(-1)">-</view>
|
|||
|
|
<view class="numberValue-card">
|
|||
|
|
<input type="number" :value="value" @input="changeInput" class="numberValue-input" placeholder="请输入比例" />
|
|||
|
|
<text class="percentage">%</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="fuHao" @click="calculate(1)">+</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "NumberBox",
|
|||
|
|
props: {
|
|||
|
|
value: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
},
|
|||
|
|
maxValue:{
|
|||
|
|
type: Number,
|
|||
|
|
default: 30,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
calculate(value) {
|
|||
|
|
let num = Number(this.value) + value;
|
|||
|
|
if (num > this.maxValue) {
|
|||
|
|
if(num<this.maxValue +1){
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$emit('input', this.maxValue);
|
|||
|
|
});
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `不能大于${this.maxValue}%`,
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
} else if (num < 0) {
|
|||
|
|
if(num>-1){
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$emit('input', 0);
|
|||
|
|
});
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `不能小于0%`,
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$emit('input', num);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
changeInput(event) {
|
|||
|
|
let value = event.detail.value;
|
|||
|
|
this.$emit('input', value);
|
|||
|
|
// 将输入值转为数字（处理可能的字符串输入）
|
|||
|
|
let num = Number(value);
|
|||
|
|
// 处理非数字的情况（如输入非数字字符时，默认设为0）
|
|||
|
|
if (isNaN(num)) {
|
|||
|
|
num = 0;
|
|||
|
|
}
|
|||
|
|
// 边界值处理
|
|||
|
|
if (num > this.maxValue) {
|
|||
|
|
num = this.maxValue;
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$emit('input', num);
|
|||
|
|
});
|
|||
|
|
} else if (num < 0) {
|
|||
|
|
num = 0;
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$emit('input', num);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.numberValue {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
|
|||
|
|
.numberValue-card {
|
|||
|
|
position: relative;
|
|||
|
|
width: 140rpx;
|
|||
|
|
padding-right: 40rpx;
|
|||
|
|
height: 46rpx;
|
|||
|
|
background: #F6F6F6;
|
|||
|
|
|
|||
|
|
.numberValue-input {
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 46rpx;
|
|||
|
|
background: #F6F6F6;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
text-align: center !important;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.percentage {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 9rpx;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 37rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fuHao {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.uni-input-placeholder{
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #D1CCCC;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
</style>
|