Bagaimana untuk mendapatkan HTMLElements dalam slot menggunakan vue3?

Question

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

// Wrapper.vue

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

<skrip lang="ts" persediaan>
import {
  defineProps,
  ref,
  menonton,
  gunakanAtts,
  onMounted,
  onUnmounted,
  getCurrentInstance,
} daripada "vue";

const props = defineProps({
  nama: { jenis: Rentetan, lalai: "" },
  zIndex: { jenis: Nombor, lalai: 0 },
});
const attrs = useAttrs();
const inst = getCurrentInstance();

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

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

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

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

const setBrothersAttrs = () => {
  biarkan el = inst?.vnode.el;
  biarkan anak = el?.parentElement?.anak;
  jika (el && kanak-kanak) {
    untuk (biar i = 0; i < children.length; i++) {
      biar bro = anak-anak[i];
      jika (bro === el) teruskan;
      bro.style.zIndex = props.zIndex;
    }
  }
};
</script>

// Test.vue

<template>
  <div class="ujian">
    <Nama pembungkus="pembungkus1" :z-index="1">
      <img class="gambar1" />
      <div class="dalaman">
        <Nama pembungkus="pembungkus2" :z-index="2">
          <img class="gambar2" />
        </Pembungkus>
      </div>
      <Nama pembungkus="pembungkus3" :z-index="3">
        <img class="gambar3" />
      </Pembungkus>
    </Pembungkus>
  </div>
</template>

<skrip lang="ts"
import Wrapper dari "./Wrapper.vue";
</script>

// Keputusan dalam format HTML:

<div class="test">
  <img class="gambar1"style="z-index: 1" /><!-- jika tiada pembungkus3, "z-index: 3"
  <div class="inner"style="z-index: 1">
    <img class="gambar2"style="z-index: 2"
  </div>
  <img class="picture3"style="z-index: 1" /><!-- jika tiada pembungkus3, "z-index: 3"
</div>

Seperti yang ditunjukkan dalam kod di atas, Pembungkus komponen ialah komponen kosong. Tujuannya adalah untuk menetapkan indeks-z HTMLElements dalam slot["default"].

Malangnya, saya tidak dapat mencari elemen anak dalam useSlots()["default"]. Jadi saya cuba meminta pemerhati mutasi memerhatikan senarai anak ibu bapa.

Ia berfungsi dengan baik sendiri (seperti gambar 1 dan gambar 2 dalam contoh). Tetapi apabila berbilang Pembungkus dililit bersama, ia akan menutup satu sama lain (Seperti gambar 3 dalam contoh, z-indeks gambar3 yang ditetapkan oleh pembungkus3 ditimpa oleh pembungkus1). Ini bermakna mereka berkongsi ibu bapa yang sama, supaya anak-anak ibu bapa sentiasa sama.

Jadi kini persoalannya kembali "Bagaimana untuk mendapatkan HTMLElements dalam slot"...bolehkah mana-mana guru vuejs membantu saya?

Answer 1

Ia boleh dilakukan dengan lebih mudah menggunakan fungsi render Vue: Slot render

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>