141 lines
2.6 KiB
Vue
141 lines
2.6 KiB
Vue
/*
|
|
该步进器可以设置整数是否、最大数、最小数、步进数，支持负数，小数
|
|
*/
|
|
|
|
<template>
|
|
<view class="number-box">
|
|
<view class="minus" :class="{'disabled':selfValue<=min}">
|
|
<u-icon name="minus" size="28" @click="minusClick"></u-icon>
|
|
</view>
|
|
<input class="self-input" type="number" v-model="selfValue" @blur="inputValue"/>
|
|
<view class="plus" :class="{'disabled':selfValue>=max}">
|
|
<u-icon name="plus" size="28" @click="plusClick"></u-icon>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 这里引入js精度运算方法
|
|
import {numAdd,numSub} from '@/static/common/js/js-calculate.js'
|
|
export default{
|
|
data(){
|
|
return{
|
|
selfValue: 0
|
|
}
|
|
},
|
|
props:{
|
|
// 最小值
|
|
min:{
|
|
type:Number,
|
|
default:-99999
|
|
},
|
|
// 最大值
|
|
max:{
|
|
type:Number,
|
|
default:99999
|
|
},
|
|
// 默认值
|
|
value:{
|
|
type:Number,
|
|
default:0
|
|
},
|
|
// 是否为整数值
|
|
integer: {
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
// 步长
|
|
step: {
|
|
type:Number,
|
|
default:1
|
|
},
|
|
},
|
|
watch: {
|
|
selfValue() {
|
|
if (this.value != this.selfValue) {
|
|
this.$emit('changeValue', this.selfValue)
|
|
}
|
|
},
|
|
value(){
|
|
if (this.value != this.selfValue) {
|
|
this.selfValue = this.value
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
// 输入框变化时
|
|
inputValue(event){
|
|
let val = event.detail.value;
|
|
if(this.integer){
|
|
val = val.replace(/[^0-9]/g, '');
|
|
}
|
|
if(val <= this.min){
|
|
val = this.min;
|
|
}
|
|
if (val >= this.max) {
|
|
val = this.max;
|
|
}
|
|
this.$nextTick(() => {
|
|
this.selfValue = val;
|
|
})
|
|
|
|
},
|
|
// 点击减
|
|
minusClick(){
|
|
console.log(this.selfValue)
|
|
if (this.selfValue <= this.min) {
|
|
this.selfValue = this.min
|
|
return
|
|
}else if (this.selfValue > this.max) {
|
|
this.selfValue = this.max
|
|
return
|
|
}
|
|
this.selfValue = numSub(this.selfValue,this.step);
|
|
},
|
|
// 点击加
|
|
plusClick(){
|
|
if (this.selfValue < this.min) {
|
|
this.selfValue = this.min
|
|
return
|
|
}else if (this.selfValue >= this.max) {
|
|
this.selfValue = this.max
|
|
return
|
|
}
|
|
this.selfValue = numAdd(this.selfValue,this.step);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.number-box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.minus,.plus{
|
|
flex: 1;
|
|
height: 100%;
|
|
background: #f5f7fa;
|
|
border: 1px solid #DCDFE6;
|
|
color: #333;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.disabled{
|
|
background: #f8f8f8;
|
|
color: #ccc;
|
|
}
|
|
.self-input{
|
|
width: 120rpx;
|
|
height: 100%;
|
|
background: #fff;
|
|
text-align: center;
|
|
line-height: 100%;
|
|
color: #333;
|
|
}
|
|
</style>
|