Comment obtenir des HTMLElements dans le slot en utilisant vue3 ?

Question

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

// Wrapper.vue

<template>
  <slot v-bind="attrs"></slot>
</modèle>

<script lang="ts" configuration>
importer {
  définirProps,
  réf,
  montre,
  utiliserAttrs,
  surMonté,
  surDémonté,
  getCurrentInstance,
} de "vue" ;

const props = définirProps({
  nom : { type : Chaîne, par défaut : "" },
  zIndex : { type : Nombre, par défaut : 0 },
});
const attrs = useAttrs();
const inst = getCurrentInstance();

const observateur = ref<MutationObserver | nul>(nul);

montre(
  () => [props.zIndex, props.nom],
  () => {
    setBrothersAttrs();
  }
);

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

onDémonté(() => {
  if (observer.value) observer.value.disconnect();
});

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

// Test.vue

<template>
  <div class="test">
    <Nom du wrapper="wrapper1" :z-index="1">
      <img class="image1" />
      <div class="intérieur">
        <Nom du wrapper="wrapper2" :z-index="2">
          <img class="image2" />
        </Emballage>
      </div>
      <Nom du wrapper="wrapper3" :z-index="3">
        <img class="image3" />
      </Emballage>
    </Emballage>
  </div>
</modèle>

<script lang="ts" configuration>
importer le Wrapper depuis "./Wrapper.vue" ;
</script>

// Résultats au format HTML :

<div class="test">
  <img class="picture1" style="z-index: 1" /><!-- s'il n'y a pas de wrapper3, "z-index: 3" -->
  <div class="style intérieur="z-index: 1">
    <img class="image2" style="z-index : 2" />
  </div>
  <img class="picture3" style="z-index: 1" /><!-- s'il n'y a pas de wrapper3, "z-index: 3" -->
</div>

Comme le montre le code ci-dessus, le composant Wrapper est un composant vide. Son but est de définir le z-index des HTMLElements dans slot["default"].

Malheureusement, je ne trouve pas l'élément enfant dans useSlots()["default"]. J'ai donc essayé de demander à un observateur de mutation d'observer la liste des enfants du parent.

Il fonctionne très bien tout seul (comme l'image 1 et l'image 2 dans l'exemple). Mais lorsque plusieurs Wrapper sont enveloppés ensemble, ils se recouvrent les uns les autres (Comme l'image 3 dans l'exemple, l'index z de l'image3 défini par wrapper3 est écrasé par wrapper1). Cela signifie qu'ils partagent le même parent, de sorte que les enfants du parent sont toujours les mêmes.

Alors maintenant, la question redevient "Comment obtenir des éléments HTML dans l'emplacement"... un gourou de vuejs peut-il m'aider ?

Answer 1

Cela peut être fait plus simplement en utilisant les fonctions de rendu de Vue : Emplacements de rendu

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>