Wie bekomme ich HTMLElements mit vue3 in den Slot?

Question

当我尝试开发 Layer 组件时发生了一些事情.代码如下:

// Wrapper.vue

<template>
  <slot v-bind="attrs"></slot>
</template>

<script lang="ts" Setup>
importieren {
  defineProps,
  ref,
  betrachten,
  useAttrs,
  onMounted,
  onUnmontiert,
  getCurrentInstance,
} von „vue“;

const props = defineProps({
  Name: { Typ: String, Standard: "" },
  zIndex: { Typ: Zahl, Standard: 0 },
});
const attrs = useAttrs();
const inst = getCurrentInstance();

const observer = ref<MutationObserver | null>(null);

betrachten(
  () => [props.zIndex, props.name],
  () => {
    setBrothersAttrs();
  }
);

onMounted(() => {
  let el = inst?.vnode.el;
  wenn (el) {
    if (!observer.value)
      Observer.value = new MutationObserver(setBrothersAttrs);
    Observer.value.observe(el.parentElement, { childList: true });
  }
  setBrothersAttrs();
});

onUnmount(() => {
  if (observer.value) observer.value.disconnect();
});

const setBrothersAttrs = () => {
  let el = inst?.vnode.el;
  let children = el?.parentElement?.children;
  if (el && Kinder) {
    for (let i = 0; i < children.length; i++) {
      let bro = children[i];
      if (bro === el) continue;
      bro.style.zIndex = props.zIndex;
    }
  }
};
</script>

// Test.vue

<template>
  <div class="test">
    <Wrapper-Name="wrapper1" :z-index="1">
      <img class="picture1" />
      <div class="inner">
        <Wrapper-Name="wrapper2" :z-index="2">
          <img class="picture2" />
        </Wrapper>
      </div>
      <Wrapper-Name="wrapper3" :z-index="3">
        <img class="picture3" />
      </Wrapper>
    </Wrapper>
  </div>
</template>

<script lang="ts" setup>
Wrapper aus „./Wrapper.vue“ importieren;
</script>

// Ergebnisse im HTML-Format:

<div class="test">
  <img class="picture1" style="z-index: 1><!-- wenn kein Wrapper3, "z-index: 3"
  <div class="inner" style="z-index: 1">
    <img class="picture2" style="z-index: 2"
  </div>
  <img class="picture3" style="z-index: 1><!-- wenn kein wrapper3, "z-index: 3"
</div>

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?

Answer 1

使用 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; }

<div id="app" v-cloak>
   <div class="test">
   Test
    <Wrapper name="wrapper1" :z-index="1">
      <img class="picture1" />
      <div class="inner">
        <Wrapper name="wrapper2" :z-index="2">
          <img class="picture2" />
        </Wrapper>
      </div>
      <Wrapper name="wrapper3" :z-index="3">
        <img class="picture3" />
      </Wrapper>
    </Wrapper>
  </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>