111 lines
2.9 KiB
Vue
111 lines
2.9 KiB
Vue
<template>
|
|
<view class="flex items-center pt-[14rpx] pb-[20rpx] justify-center">
|
|
<view
|
|
class="w-[84rpx] h-[36rpx] rounded-full border-[#187CFF] border-solid border-[2rpx] flex items-center px-[18rpx] py-[10rpx] text-[#1580FF] text-[26rpx] bg-[rgba(21,128,255,0.1)]"
|
|
>
|
|
<input
|
|
v-model="currentLeftValue"
|
|
class="leading-[1] h-auto! min-h-auto! text-right!"
|
|
type="number"
|
|
@blur="handleNumberChange"
|
|
/>
|
|
分
|
|
</view>
|
|
<view class="mx-[20rpx] flex-1 h-[20rpx]">
|
|
<image
|
|
src="https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/qujian.png"
|
|
mode="scaleToFill"
|
|
class="h-[20rpx]"
|
|
/>
|
|
</view>
|
|
<view
|
|
class="w-[84rpx] h-[36rpx] rounded-full border-[#187CFF] border-solid border-[2rpx] flex items-center px-[18rpx] py-[10rpx] text-[#1580FF] text-[26rpx] bg-[rgba(21,128,255,0.1)]"
|
|
>
|
|
<input
|
|
v-model="currentRightValue"
|
|
class="leading-[1] h-auto! min-h-auto! text-right"
|
|
type="number"
|
|
@blur="handleNumberChange"
|
|
/>
|
|
分
|
|
</view>
|
|
|
|
<view
|
|
class="w-[120rpx] h-[56rpx] bg-[#1580FF] rounded-full text-[#fff] flex items-center justify-center text-[26rpx] font-500 ml-[20rpx]"
|
|
@click.stop="handleRightThumbTouchEnd"
|
|
>
|
|
查询
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Array<number>,
|
|
default: () => [0, 0],
|
|
},
|
|
min: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
max: {
|
|
type: Number,
|
|
default: 200,
|
|
},
|
|
})
|
|
|
|
// 当前值
|
|
const currentLeftValue = ref(0)
|
|
const currentRightValue = ref(0)
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
() => {
|
|
currentLeftValue.value = props.modelValue.length > 0 ? props.modelValue[0] : props.min
|
|
currentRightValue.value =
|
|
props.modelValue.length > 0 ? props.modelValue[1] : props.modelValue[0]
|
|
},
|
|
{ deep: true },
|
|
)
|
|
|
|
const emits = defineEmits(['update:modelValue', 'change'])
|
|
|
|
const handleNumberChange = () => {
|
|
let changeValue = [currentLeftValue.value, currentRightValue.value].map((item) => Number(item))
|
|
if (currentLeftValue.value > currentRightValue.value) {
|
|
changeValue = changeValue.reverse()
|
|
currentLeftValue.value = changeValue[0]
|
|
currentRightValue.value = changeValue[1]
|
|
}
|
|
|
|
// 添加最小值和最大值的判断
|
|
const leftValue = Number(currentLeftValue.value)
|
|
const rightValue = Number(currentRightValue.value)
|
|
|
|
if (leftValue < props.min) {
|
|
currentLeftValue.value = props.min
|
|
}
|
|
if (rightValue > props.max) {
|
|
currentRightValue.value = props.max
|
|
}
|
|
|
|
emitValueChange()
|
|
}
|
|
|
|
const handleRightThumbTouchEnd = () => {
|
|
const changeValue = [currentLeftValue.value, currentRightValue.value]
|
|
emits('change', changeValue)
|
|
}
|
|
|
|
// 发送值变化事件
|
|
const emitValueChange = () => {
|
|
emits(
|
|
'update:modelValue',
|
|
[currentLeftValue.value, currentRightValue.value].map((item) => Number(item)),
|
|
)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|