Vue 3 中动态数据模态框的即时显示策略

<!-- ProjectPanel.vue (子组件) -->
<template>
  <div
    class="modal fade"
    id="projectPanel"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body">
          <!-- 内容区 -->
          <PulseLoader v-if="isFetching"/>
          <div v-else class="row">
            <!-- 项目详情内容 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// ... 省略导入和组件定义 ...
export default defineComponent({
  name: "ProjectPanel",
  props: ["id"],
  data() { /* ... */ },
  components: { PulseLoader },
  watch: {
    id: {
      immediate: true,
      async handler(val) {
        if (val !== "" && val !== undefined) {
          await this.RetrieveProject(val as string);
        }
      },
    }
  },
  methods: {
    async RetrieveProject(id: string) {
      this.isFetching = true;
      // ... Axios 调用获取数据 ...
      this.isFetching = false;
    },
  }
});
</script>

<!-- ParentComponent.vue -->
<template>
  <!-- ... 其他内容 ... -->
  <ProjectPanel :id="id" :key="id" />
</template>

<!-- ParentComponent.vue -->
<template>
  <!-- 触发模态框的按钮或其他元素 -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#projectPanel" @click="openProject(someId)">
    打开项目详情
  </button>

  <!-- 模态框的顶层容器，现在位于父组件 -->
  <div
    class="modal fade"
    id="projectPanel"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <!-- 子组件 ProjectPanel 作为模态框的内容 -->
    <!-- :key="id" 仍然很重要，确保在id变化时强制更新子组件，尤其是在数据结构复杂或需要完全重置子组件状态时 -->
    <ProjectPanel :id="selectedProjectId" :key="selectedProjectId" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ProjectPanel from './ProjectPanel.vue'; // 确保路径正确

export default defineComponent({
  name: 'ParentComponent',
  components: {
    ProjectPanel,
  },
  setup() {
    const selectedProjectId = ref<string | null>(null);

    const openProject = (id: string) => {
      selectedProjectId.value = id;
      // 在这里不需要手动显示模态框，data-bs-toggle="modal" 会处理
    };

    return {
      selectedProjectId,
      openProject,
    };
  },
});
</script>

<!-- ProjectPanel.vue (子组件) -->
<template>
  <!-- 注意：顶层的 div.modal.fade 已经被移除 -->
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <PulseLoader v-if="isFetching"/>
        <div v-else class="row">
          <div class="col text-center align-self-center">
            <img
              class="image"
              v-if="imageUrl === ''"
              :src="projectDetail.thumbnailUrl"
            />
            <img class="image" v-else :src="imageUrl" />
          </div>
          <div class="col h-100">
            <div class="text-start pb-2">
              <h1>{{ projectDetail.name }}</h1>
            </div>
            <div class="text-start pb-2">
              <h2>{{ projectDetail.createdTime }}</h2>
            </div>
            <div class="wording text-start">
              <p>
                {{ projectDetail.description }}
              </p>
            </div>
            <div class="container">
              <div class="row">
                <img
                  v-for="item in projectDetail.Images"
                  :key="item.id"
                  class="img my-2"
                  @click="imageUrl = item.imageUrl"
                  :src="item.imageUrl"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import ProjectDataService from "@/services/ProjectDataService";
import type ProjectDetail from "./Projects/ProjectDetail"; // 使用 type 导入类型
import type ResponseData from "./Shared/ResponseData"; // 使用 type 导入类型
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'

export default defineComponent({
  name: "ProjectPanel",
  props: {
    id: {
      type: String,
      default: "", // 确保有默认值
    }
  },
  data() {
    return {
      projectDetail: {} as ProjectDetail,
      imageUrl: "",
      isFetching: true,
    };
  },
  components: { PulseLoader },
  watch: {
    id: {
      immediate: true, // 组件首次加载时也执行一次
      async handler(val) {
        // 当 ID 变化时，清空当前详情并重新加载
        this.projectDetail = {} as ProjectDetail; // 清空旧数据
        this.imageUrl = ""; // 清空图片选择
        if (val && val !== "") { // 确保 id 有效
          await this.RetrieveProject(val as string);
        } else {
          this.isFetching = false; // 如果 id 为空，停止加载状态
        }
      },
    }
  },
  methods: {
    async RetrieveProject(id: string) {
      this.isFetching = true;
      let responseData: ProjectDetail = {} as ProjectDetail; // 明确类型

      try {
        const res: ResponseData = await ProjectDataService.getById(id);
        responseData = res.data.data.project;
      } catch (e: any) { // 捕获具体的错误类型
        console.error("Error fetching project details:", e);
        // 可以添加错误处理逻辑，例如显示错误消息
      } finally {
        this.projectDetail = responseData;
        this.isFetching = false;
        // 如果有默认图片，可以在这里设置
        if (this.projectDetail.Images && this.projectDetail.Images.length > 0) {
          this.imageUrl = this.projectDetail.Images[0].imageUrl;
        } else {
          this.imageUrl = this.projectDetail.thumbnailUrl || "";
        }
      }
    },
  }
});
</script>

<style scoped>
/* 样式保持不变 */
.image {
  max-width: 100%;
  height: auto;
}
.img {
  width: 80px; /* 缩略图大小 */
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #eee;
  margin-right: 5px;
}
.img:hover {
  border-color: #007bff;
}
</style>