使用Skeleton@0.86.9创建自定义组件模态框时图片重复显示问题

环境与需求 #

使用skeleton@0.86.9、Svelte-Kit和Tailwind，通过函数调用自定义组件模态框展示指定URL的图片，基于Skeleton组件模态框实现。

现有问题 #

1. 打开模态框时图片显示两次：一次是无自定义组件时的默认样式图片，一次是自定义img标签渲染的带样式图片，需保留后者。
2. 浏览器控制台出现两条警告：
   • <FileModal> received an unexpected slot "default"
   • <FileModal> was created with unknown prop 'parent'

解决图片重复显示问题 #

问题根源：使用component类型模态框时，Skeleton会默认渲染基础模态框结构（含默认内容区域），再叠加自定义组件内容，导致重复渲染。

修改方案：
调用modalStore.trigger时显式清空默认内容，通过组件props传递图片URL（而非直接读取modalStore），避免默认内容触发渲染。

1. 更新模态框调用函数：

export const componentModal = (settings: Partial<ModalSettings> & { image: string }): Promise<void> =>
  new Promise((resolve, reject) => {
    modalStore.trigger({
      type: 'component',
      // 清空默认标题与内容，避免默认渲染
      title: '',
      body: '',
      component: { 
        ref: FileModal,
        // 将图片URL作为组件props传入
        props: { image: settings.image }
      },
      response: (r) => (r ? resolve() : reject()),
      ...settings,
    });
  });

2. 修改FileModal.svelte，通过props接收图片URL：

<script lang="ts">
  // 接收Skeleton自动传递的parent属性，解决警告
  export let parent: HTMLElement;
  // 接收传入的图片URL
  export let image: string;

  const cImage = 'max-w-[90%] max-h-[90%] rounded-container-token overflow-hidden shadow-xl';
</script>

<!-- 直接使用props中的image，无需读取modalStore -->
<img src="{image}" class="{cImage}" alt="Preview" />
<!-- 添加默认插槽，解决unexpected slot警告 -->
<slot />

解决控制台警告问题 #

1. unexpected slot "default"警告：
   在FileModal.svelte中添加<slot />，接收Skeleton组件模态框自动传入的默认插槽内容（即使为空）。

2. unknown prop 'parent'警告：
   在FileModal.svelte的script中导出parent属性：export let parent: HTMLElement;，Skeleton会自动传递该属性用于模态框层级管理。

内容的提问来源于stack exchange，提问作者Pascal-1609