如何在Vue3命名插槽中控制图像

m4pnthwp 于 2023-08-07 发布在 Vue.js

关注(0)|答案(1)|浏览(136)

所以我做了一个带有命名插槽的卡组件：

<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>

字符串
这是一张带有标识和技术名称的卡片。但是当我使用它的时候：

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

型
我不能控制类的图像。当我一个接一个地向图像添加类时，它的工作原理是这样的：

>  <template #logo>
>           <img src="assets\images\hero-section\node.png" class="w-[80%]" alt="" />
>         </template>

型
但是当我把这个class=“w-[80%]”移动到指定的插槽时，它就不再工作了。我写的任何类的img标签内插槽不工作。如何在插槽中通用控制图像？

vue.js

来源：https://stackoverflow.com/questions/76794801/how-to-control-images-in-vue3-named-slots

1条答案

按热度按时间

iaqfqrcu1#

您需要将w-[80%]类放在传入插槽的<img>上。<slot name="logo">中的<img>元素在没有<template #logo>被传递时是一个占位符，并且对您传递到slot中的<img>没有影响，因为slot的内容被完全替换。应用于占位符<img>的任何类名对传递的<img>元素都没有影响。
如果您总是希望logo插槽中有一个图像，则可以将use a prop替换为<img>，从而允许您强制执行class属性值：

<template>
  <div …>
    <div … >
      <img :src="logo" alt="" class="w-[80%]" />
    </div>
    …
  </div>
</template>

<script setup>
const props = defineProps(['logo']);
</script>

<!-- or -->

<script>
export default {
  props: ['logo'],
}
</script>

<!-- etc. -->

字符串
然后在使用它：

<Card logo="assets\images\hero-section\node.png">
  …
</Card>

型

赞(0）回复(0）举报 2023-08-07

我来回答

如何在Vue3命名插槽中控制图像

1条答案

相关问题

热门标签

最新问答