sl-sfy-safety/src/views/map-config/mini-map/components/EditDimension.vue

<template>
  <span style="padding-left: 10px">
    <span>{{ props.label }}: </span>
    <ElInput
      style="width: 50px"
      size="small"
      @input="handleChange"
      v-model="val"
      :disabled="props.disabled"
    />
  </span>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { ElInput } from 'element-plus';
  const props = defineProps<{ label: string; modelValue: number; disabled?: boolean }>();

  const val = ref();
  watch(
    () => props.modelValue,
    () => {
      val.value = Math.floor(props.modelValue);
    },
    { immediate: true },
  );

  const emits = defineEmits<{ (e: 'update:modelValue', val: number): unknown }>();

  const handleChange = (e) => {
    emits('update:modelValue', Number(e));
  };
</script>
<style scoped></style>