<template>
  <el-input v-model="localData" type="text" @input="changeValue" style="width: 100px">
    <template #append v-if="$slots.append"> <slot name="append" /></template>
    <template #prefix v-if="$slots.prefix"> <slot name="prefix" /></template>
    <template #suffix v-if="$slots.suffix"> <slot name="suffix" /></template>
    <template #prepend v-if="$slots.prepend"> <slot name="prepend" /></template>
  </el-input>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
    default: () => "",
  },
});
const emits = defineEmits(["update:modelValue"]);

const localData = ref(props.modelValue);
watch(
  () => props.modelValue,
  (val) => {
    if (val && val.length > 0) {
      localData.value = JSON.parse(JSON.stringify(val));
    }
  },
  { deep: true, immediate: true },
);
const changeValue = (val) => {
  localData.value = val.replace(/[^0-9.]/g, ""); // 只保留数字和小数点
  emits("update:modelValue", localData.value);
};
</script>
