<template>
  <input type="text" v-model="value" @change="changeHandler" placeholder="自定义的输入框">
</template>

<script lang="ts" setup>
import { computed, inject, onMounted } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['update:modelValue', 'change'])
const value = computed({
  get () {
    return props.modelValue
  },
  set (val) {
    emits('update:modelValue', val)
    emits('change', val)
  }
})
const getItemValue: any = inject('getItemValue')

onMounted(() => {
  console.log(getItemValue({ key: 'center' }))
})

function changeHandler (event) {
  emits('change', event)
}
</script>

<style lang="scss" scoped>
input {
  border: 1px solid #ddd;

  &.is-error {
    border: 1px solid red;
  }
}
</style>
