样式化 Vue 插槽

Posted 2023-02-23

【中文标题】样式化 Vue 插槽

【英文标题】：Styling Vue Slot

【发布时间】：2018-04-29 06:32:31

【问题描述】：

有没有办法在 Vue 组件中设置插槽的样式？

<slot style="position: absolute"></slot>

和

<slot class="slot"></slot>

不工作。

【参考方案1】：

将插槽包装在 <div> 中，并改为设置 <div> 的样式：

<div style="...">
  <slot></slot>
</div>

如果你真的需要设置 slot 元素的样式，你可以像这样使用 CSS 选择器：

<div class="wrapper">
  <slot></slot>
</div>

.wrapper > * 
  color: red;

【讨论】：

感谢您的回答。但是，如果将多个元素传递到插槽中，则该解决方案将不起作用。

.wrapper > * 将针对每个插槽元素。如果您只需要定位特定的槽元素，则可以使用.wrapper > *:nth-child(2) 或.wrapper > .child。你具体想做什么？您希望能够绑定每个插槽元素的动态style，还是使用外部 CSS 就足够了？

使用 div 或其他元素进行包装可以而且经常会破坏内容流......你突然有一个随机的 它不应该在，它可能没有表现得像插槽内容的必要样式。不幸的是，display: contents 没有得到很好的支持。

【参考方案2】：

您可以像这样从父级传递一个类：

在组件模板中：

<slot name="quoteText"></slot>

而当传递到插槽时：

<p slot="quoteText" class="mb-md-100">Text</p>

【参考方案3】：

我找到了这样的出路。

    computed: 
        isAppBoxSlotActive() 
            return Boolean(this.$slots['app-box']);
        
    ,

    <div v-if="isAppBoxActive"
         :class="$style['app-box']">
        <slot name="app-box">...</slot>
    </div>