7 changed files with 340 additions and 90 deletions
@ -0,0 +1,213 @@ |
|||||
|
<template> |
||||
|
<view class="uni-numbox"> |
||||
|
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{ background }"> |
||||
|
<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 uni-numbox-btns" :style="{ background }"> |
||||
|
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { onMounted, nextTick, watch } from 'vue' |
||||
|
|
||||
|
// name: "UniNumberBox" |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
value: { |
||||
|
type: [Number, String], |
||||
|
default: 1 |
||||
|
}, |
||||
|
min: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
max: { |
||||
|
type: Number, |
||||
|
default: 100 |
||||
|
}, |
||||
|
step: { |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
}, |
||||
|
background: { |
||||
|
type: String, |
||||
|
default: '#f5f5f5' |
||||
|
}, |
||||
|
disabled: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}) |
||||
|
const inputValue = ref(0) |
||||
|
watch( |
||||
|
() => inputValue.value, |
||||
|
(newVal, oldVa) => { |
||||
|
if (+newVal !== +oldVal) { |
||||
|
emit('change', newVal) |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
immediate: true, |
||||
|
deep: true |
||||
|
} |
||||
|
) |
||||
|
onMounted(() => { |
||||
|
inputValue.value = +props.value |
||||
|
}) |
||||
|
|
||||
|
const setValue = (val) => { |
||||
|
inputValue.value = val |
||||
|
} |
||||
|
// 输入框实时获取输入内容 |
||||
|
const onKeyInput = (event) => { |
||||
|
// console.log( event.detail.value) |
||||
|
const hint = event.detail.value |
||||
|
if (!Number.isInteger(hint)) { |
||||
|
// 如果不是整数，则设置为上一个有效值 |
||||
|
const temp = hint.toString().match(/^\d+/) |
||||
|
if (Array.isArray(temp)) { |
||||
|
inputValue.value = temp[0] |
||||
|
} else { |
||||
|
inputValue.value = temp |
||||
|
} |
||||
|
|
||||
|
// this.inputValue = hint.toString().match(/^\d+/) || 0; |
||||
|
} else { |
||||
|
// 如果是整数，则更新数据 |
||||
|
inputValue.value = hint |
||||
|
} |
||||
|
} |
||||
|
// 加、减操作(minus:减;plus:加) |
||||
|
const _calcValue = (type) => { |
||||
|
if (this.disabled) { |
||||
|
return |
||||
|
} |
||||
|
const scale = _getDecimalScale() |
||||
|
let value = inputValue.value * scale |
||||
|
const step = props.step * scale |
||||
|
if (type === 'minus') { |
||||
|
value -= step |
||||
|
if (value < props.min * scale) { |
||||
|
return |
||||
|
} |
||||
|
if (value > props.max * scale) { |
||||
|
value = props.max * scale |
||||
|
} |
||||
|
} else if (type === 'plus') { |
||||
|
value += step |
||||
|
if (value > props.max * scale) { |
||||
|
return |
||||
|
} |
||||
|
if (value < props.min * scale) { |
||||
|
value = props.min * scale |
||||
|
} |
||||
|
} |
||||
|
if (`${value}`.length > 5) { |
||||
|
value = value.toFixed(0) // toFixed保留小数点位数方法 |
||||
|
} |
||||
|
inputValue.value = String(value / scale) |
||||
|
} |
||||
|
const _getDecimalScale = () => { |
||||
|
const scale = 1 |
||||
|
// 浮点型 |
||||
|
// if (~~this.step !== this.step) { |
||||
|
// scale = Math.pow(10, (this.step + "").split(".")[1].length); |
||||
|
// } |
||||
|
return scale |
||||
|
} |
||||
|
const onBlur = (event) => { |
||||
|
let { value } = event.detail |
||||
|
if (!value) { |
||||
|
return |
||||
|
} |
||||
|
value = +value |
||||
|
if (value > props.max) { |
||||
|
value = props.max |
||||
|
} else if (value < props.min) { |
||||
|
value = props.min |
||||
|
} |
||||
|
inputValue.value = value |
||||
|
/* 小数点后保留四位 */ |
||||
|
// if (value > 0) { |
||||
|
|
||||
|
// event.detail.value =parseFloat(event.detail.value).toFixed(0) |
||||
|
// } else { |
||||
|
// event.detail.value =-parseFloat(event.detail.value).toFixed(0) |
||||
|
// } |
||||
|
// 重新赋值给input |
||||
|
nextTick(() => { |
||||
|
inputValue.value = event.detail.value |
||||
|
}) |
||||
|
} |
||||
|
// 传递给父类 |
||||
|
const emit = defineEmits(['change', 'confirm']) |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
$box-height: 26px; |
||||
|
$bg: #f5f5f5; |
||||
|
$br: 2px; |
||||
|
$color: #333; |
||||
|
|
||||
|
.uni-numbox { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
|
||||
|
.uni-numbox-btns { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 0 8px; |
||||
|
background-color: $bg; |
||||
|
/* #ifdef H5 */ |
||||
|
cursor: pointer; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-numbox__value { |
||||
|
margin: 0 2px; |
||||
|
background-color: $bg; |
||||
|
width: 100px; |
||||
|
height: $box-height; |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
border-left-width: 0; |
||||
|
border-right-width: 0; |
||||
|
color: $color; |
||||
|
} |
||||
|
|
||||
|
.uni-numbox__minus { |
||||
|
border-top-left-radius: $br; |
||||
|
border-bottom-left-radius: $br; |
||||
|
width: 64rpx; |
||||
|
} |
||||
|
|
||||
|
.uni-numbox__plus { |
||||
|
border-top-right-radius: $br; |
||||
|
border-bottom-right-radius: $br; |
||||
|
width: 64rpx; |
||||
|
} |
||||
|
|
||||
|
.uni-numbox--text { |
||||
|
// fix nvue |
||||
|
line-height: 20px; |
||||
|
|
||||
|
font-size: 20px; |
||||
|
font-weight: 300; |
||||
|
color: $color; |
||||
|
} |
||||
|
|
||||
|
.uni-numbox .uni-numbox--disabled { |
||||
|
color: #c0c0c0 !important; |
||||
|
/* #ifdef H5 */ |
||||
|
cursor: not-allowed; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue