vue 自定义input内容宽度自适应

<template>
  <div class="adaptive-input-container">
    <span class="adaptive-span">{{ modelValue }}</span>
    <input
      type="text"
      :value="modelValue"
      @input="valueOnUpdate($event)"
      placeholder="请输入"
      class="adaptive-input"
    />
  </div>
</template>

<script setup lang="ts">
interface PropsType {
  modelValue: string;
}

type EmitsType = {
  (event: "update:modelValue", val: string);
};

const props = defineProps<PropsType>();
const emit = defineEmits<EmitsType>();

const valueOnUpdate = (event: Event) => {
  const value = (event.target as HTMLInputElement).value;
  emit("update:modelValue", value);
};
</script>

<style lang="scss" scoped>
.adaptive-input-container {
  display: inline-block;
  min-width: 20px;
  max-width: 100%;
  white-space: nowrap;
  position: relative;

  .adaptive-span {
    display: inline-block;
    height: 100%;
    background: inherit;
    padding: 0;
    white-space: nowrap;
    opacity: 0;
  }

  .adaptive-input {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: transparent !important;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    opacity: 1;
    min-width: 20px;
    border: none;
    outline: none;

    &:focus,
    &:hover {
      color: var(--n-color);
    }
  }
}
</style>