如何使用 Vue 3 和 TailwindCSS 在按鈕背景圖像頂部設置 Heroicon 圖標

Question

我正在嘗試在 Vue 3 和 TailwindCSS 中的按鈕背景圖像頂部設置一個 Heroicon 圖標。 我創建了一個圓形按鈕組件，其中包含一個帶有背景圖像的按鈕和一個用於英雄圖標的插槽：

<!--ButtonComponent-->

  <div>
    <button type="button" class="relative rounded-full">
        <img :src="https://image.shutterstock.com/image-illustration/abstract-vector-blue-color-geometric-260nw-167535434.jpg">
        <slot class="absolute"></slot>
    </button>
  </div>

然后我將該按鈕組件導入另一個組件，然后將該按鈕包裹在導入的 Heroicon 圖標周圍：

<!--ParentComponent-->

<div>
  <ButtonComponent>
     <VideoCameraIcon />
  </ButtonComponent>
</div>

import { VideoCameraIcon } from '@heroicons/vue/outline'

我的目標是將處理 Heroicon 圖標的插槽配置為位於按鈕背景圖像的頂部。 為了處理這個問題，我為按鈕添加了一個 TailwindCSS 相對屬性，並為插槽添加了一個絕對屬性。 但是，這仍然行不通。 我怎樣才能使 slot 元素位於圖像頂部（以便在圖像上顯示 Heroicon 圖標）？

Answer 1

slot標簽不考慮class屬性，您應該在作用域樣式中使用:slotted偽類：

<div>
  <ButtonComponent>
     <VideoCameraIcon class="btn-icon" />
  </ButtonComponent>
</div>
<script >
import { VideoCameraIcon } from '@heroicons/vue/outline'
....
</script>
<style scoped>
:slotted(.btn-icon) {
  @apply absolute
}
</style>