当我尝试开发 Layer 组件时发生了一些事情.代码如下:
// Wrapper.vue
// Test.vue
// Ergebnisse im HTML-Format:
![]()
![]()
![]()
Wie im obigen Code gezeigt, ist die Komponente Wrapper eine leere Komponente. Sein Zweck besteht darin, den Z-Index von HTMLElements in Slot["default"] festzulegen.
Leider kann ich das untergeordnete Element in useSlots()["default"] nicht finden. Also habe ich versucht, einen Mutationsbeobachter die ChildList des Elternteils beobachten zu lassen.
Es funktioniert alleine gut (wie Bild 1 und Bild 2 im Beispiel). Aber wenn mehrere Wrapper zusammengepackt werden, überdecken sie sich gegenseitig (Wie Bild 3 im Beispiel wird der von Wrapper3 festgelegte Z-Index von Bild3 von Wrapper1 überschrieben). Das bedeutet, dass sie dasselbe übergeordnete Element haben, sodass die untergeordneten Elemente des Elternelements immer dieselben sind.
Jetzt stellt sich also wieder die Frage: "Wie bekomme ich HTMLElements in den Slot" ... kann mir irgendein Vuejs-Guru helfen?
使用 Vue 渲染函数可以更简单地完成：渲染槽
const { createApp, h } = Vue; const Wrapper = { props: { name: { type: String, default: "" }, zIndex: { type: Number, default: 0 }, }, setup(props, { slots }) { let children = slots.default(); if (children) { for (let i = 0; i < children.length; i++) { children[i].props.style = `z-index: ${props.zIndex}`; } } return () => slots.default() } } const App = { components: { Wrapper } } const app = createApp(App) const vm = app.mount('#app')#app { line-height: 2; } [v-cloak] { display: none; }