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> |