스타일링 Vue 슬롯

스타일링 Vue 슬롯

Vue 컴포넌트의 슬롯을 스타일링할 수 있는 방법이 있습니까?

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

그리고.

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

동작하지 않는다.

슬롯을 에 감습니다.<div>스타일링의<div>대신:

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

슬롯 요소를 스타일링할 필요가 있는 경우는, 다음과 같이 CSS 실렉터를 사용할 수 있습니다.

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

.wrapper > * {
  color: red;
}

다음과 같이 부모로부터 클래스를 전달할 수 있습니다.

컴포넌트 템플릿:

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

슬롯에 패스할 때:

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

나는 그런 탈출구를 찾았다.

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

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

언급URL : https://stackoverflow.com/questions/47317479/styling-vue-slot