造型Vue插槽

Question

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

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

和

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

不起作用。

Answer 1

将广告位换成<div>，然后设置<div>样式：

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

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

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

.wrapper > * {
  color: red;
}

Answer 2

您可以像这样通过父母的课程：

在组件模板中：

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

当传递到插槽时：

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

Answer 3

我找到了这样的出路。

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

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