Vue3具名插槽中如何统一控制图片样式？

问题描述 #

我做了一个带具名插槽的卡片组件：

<template>
  <div
    class="border border-2 border-gray-500 rounded-3xl w-[15rem] h-[15rem] flex flex-col items-center justify-center shadow-2xl"
  >
    <div
      name="logo"
      class="w-[80%] h-[80%] border border-2 border-gray-500 rounded-3xl overflow-hidden"
    >
      <slot name="logo">
        <img src="" alt="" class="w-full" />
      </slot>
    </div>
    <div name="name" class="font-bold text-gray-500 my-auto">
      <slot name="technology">Technology</slot>
    </div>
  </div>
</template>

这个组件用来展示logo和技术名称，但使用时直接传入图片：

<template #logo>
  <img src="assets\images\hero-section\node.png" alt="" />
</template>

图片不会继承组件里默认的样式。手动给每张图片加类能生效，但把class="w-full"放在插槽内部的默认img标签里，对用户传入的图片完全没用，想找个能统一控制插槽里图片样式的方法。

解决方案 #

方法1：用作用域插槽传递预设样式类

在组件内部给插槽传预设的样式类，用户用的时候直接拿过来用就行：

<!-- 组件内部代码修改 -->
<template>
  <div
    class="border border-2 border-gray-500 rounded-3xl w-[15rem] h-[15rem] flex flex-col items-center justify-center shadow-2xl"
  >
    <div
      class="w-[80%] h-[80%] border border-2 border-gray-500 rounded-3xl overflow-hidden"
    >
      <!-- 给插槽传递样式类 -->
      <slot name="logo" :imgClass="'w-full'">
        <img src="" alt="" class="w-full" />
      </slot>
    </div>
    <div class="font-bold text-gray-500 my-auto">
      <slot name="technology">Technology</slot>
    </div>
  </div>
</template>

使用组件时：

<template #logo="{ imgClass }">
  <img src="assets\images\hero-section\node.png" :class="imgClass" alt="" />
</template>

这种方式既能复用组件预设的样式，用户也能自己加额外的类做调整。

方法2：用CSS深度选择器强制控制插槽内元素

给插槽容器加个类，然后用:deep()穿透scoped样式，直接选中容器里的所有img元素设置样式：

<!-- 组件内部代码修改 -->
<template>
  <div
    class="border border-2 border-gray-500 rounded-3xl w-[15rem] h-[15rem] flex flex-col items-center justify-center shadow-2xl"
  >
    <!-- 给容器加专属类 -->
    <div
      class="logo-container w-[80%] h-[80%] border border-2 border-gray-500 rounded-3xl overflow-hidden"
    >
      <slot name="logo">
        <img src="" alt="" class="w-full" />
      </slot>
    </div>
    <div class="font-bold text-gray-500 my-auto">
      <slot name="technology">Technology</slot>
    </div>
  </div>
</template>

<style scoped>
/* 用深度选择器选中插槽内的img */
.logo-container :deep(img) {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选，保持图片比例不变形 */
}
</style>

不管用户传入的img有没有加类，都会被应用这个统一样式，省心省事。

方法3：让容器布局强制图片占满空间

把插槽容器改成flex布局，再给img设置宽高100%，这样用户传的图片会自动占满容器：

<!-- 组件内部代码修改 -->
<template>
  <div
    class="border border-2 border-gray-500 rounded-3xl w-[15rem] h-[15rem] flex flex-col items-center justify-center shadow-2xl"
  >
    <div
      class="logo-container w-[80%] h-[80%] border border-2 border-gray-500 rounded-3xl overflow-hidden flex items-center justify-center"
    >
      <slot name="logo">
        <img src="" alt="" />
      </slot>
    </div>
    <div class="font-bold text-gray-500 my-auto">
      <slot name="technology">Technology</slot>
    </div>
  </div>
</template>

<style scoped>
.logo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

这种方式下，用户完全不用给图片加类，直接传就能自动适配容器大小。

内容的提问来源于stack exchange，提问作者user21903805