ReportField.vue 727 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <script setup lang="ts">
  2. import { ref } from "vue";
  3. defineProps({
  4. name: String,
  5. modelValue: String,
  6. placeholder: String,
  7. });
  8. const emits = defineEmits<{
  9. (e: "update:modelValue", value: string): void;
  10. }>();
  11. const input = ref<HTMLInputElement | null>(null);
  12. function focus() {
  13. input.value?.focus();
  14. }
  15. defineExpose({
  16. focus
  17. });
  18. </script>
  19. <template>
  20. <a-row type="flex" style="align-items: center">
  21. <a-col style="width: 120px; text-align: right;">
  22. {{ name }}:
  23. </a-col>
  24. <a-col flex="1">
  25. <a-input
  26. :value="modelValue"
  27. @input="emits('update:modelValue', $event.target.value)"
  28. :placeholder="placeholder"
  29. ref="input"
  30. />
  31. </a-col>
  32. </a-row>
  33. </template>