造型Vue插槽

Question

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

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

和

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

不工作.

Answer 1

• 您可以使用 :slotted 选择器：

:slotted(.classInsideSlot) { 
  color: red;
}

Answer 2

将插槽换成a <div>并<div>改为样式:

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

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

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

.wrapper > * {
  color: red;
}

Answer 3

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

在组件模板中：

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

当传递到插槽时：

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