GroupForm #

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


<script lang="ts" setup>
import { computed } 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)
  },
})


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


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


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