hotline-web/src/components/NumberRange/index.vue

<template>
	<div class="input-number-range flex">
		<div class="from">
			<el-input-number
				ref="input_from"
				v-model="userInputForm"
				:disabled="disabled"
				placeholder="最小值"
				@change="handleInputChangeFrom"
				:min="min"
				:max="userInputTo - 1"
			/>
		</div>
		<div class="center">
			<span>至</span>
		</div>
		<div class="to">
			<el-input-number
				ref="input_to"
				v-model="userInputTo"
				:disabled="disabled"
				placeholder="最大值"
				@change="handleInputChangeTo"
				:min="userInputForm + 1"
				:max="max"
			></el-input-number>
		</div>
	</div>
</template>

<script lang="ts" setup name="inputNumberRange">
import { ref, watch } from 'vue';
const props = defineProps({
	modelValue: {
		type: Array,
		default: () => [],
	},
	disabled: {
		type: Boolean,
		default: false,
	},
	min: {
		type: Number,
		default: 0,
	},
	max: {
		type: Number,
		default: 100,
	},
});
const emit = defineEmits(['update:modelValue','change']);
const userInputForm = ref<any>(null);
const userInputTo = ref<any>(null);
watch(
	() => props.modelValue,
	(value: any) => {
		userInputForm.value = typeof value[0] === 'number' ? value[0] : null;
		userInputTo.value = typeof value[1] === 'number' ? value[1] : null;
	},
	{ immediate: true }
);
const handleInputChangeFrom = () => {
	emit('update:modelValue', [userInputForm.value, userInputTo.value]);
  emit('change', [userInputForm.value, userInputTo.value])
};
const handleInputChangeTo = () => {
	emit('update:modelValue', [userInputForm.value, userInputTo.value]);
  emit('change', [userInputForm.value, userInputTo.value])
};
</script>
<style lang="scss" scoped>
.flex {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	.center {
		margin: 1px 10px 0 10px;
	}
}
</style>