public-fuse/src/view/case/draw/edit-shape/title.vue

<template>
  <el-form-item label="内容：">
    <el-input
      @focus="$emit('inputIng', true)"
      @blur="$emit('inputIng', false)"
      :maxlength="500"
      style="width: 220px"
      v-model="value"
    >
      <template #append>
        <el-button type="primary" @click="$emit('blur')">确定</el-button>
      </template>
    </el-input>
  </el-form-item>
</template>
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { BoardShape } from "../board";

const props = defineProps<{ shape: BoardShape }>();
const emit = defineEmits<{
  (e: "delete"): void;
  (e: "blur"): void;
  (e: "inputIng", ing: boolean): void;
}>();

const value = ref(props.shape.data.text);
watchEffect(() => props.shape.setText(value.value));
</script>