vue3을 사용하여 슬롯에서 HTMLElement를 얻는 방법은 무엇입니까?
<p>当我尝试开发 Layer 组件时发生了一些事情。代码如下：</p>
<p><em>// Wrapper.vue</em></p>
<pre class="brush:php;toolbar:false;"><템플릿>
<slot v-bind="attrs"></slot>
</템플릿>
<스크립트 lang="ts" 설정>
수입 {
정의프로프스,
심판,
보다,
사용속성,
마운트됨,
마운트 해제됨,
getCurrentInstance,
} "vue"에서;;
const 소품 = 정의Props({
이름: { 유형: 문자열, 기본값: "" },
zIndex: { 유형: 숫자, 기본값: 0 },
});
const attrs = useAttrs();
const inst = getCurrentInstance();
const 관찰자 = ref<MutationObserver | 널>(널);
보다(
() => [props.zIndex, 소품.이름],
() => {
setBrothersAttrs();
}
);
onMounted(() => {
el = inst?.vnode.el;
만약 (엘) {
if (!observer.value)
관찰자.값 = 새로운 MutationObserver(setBrothersAttrs);
관찰자.value.observe(el.parentElement, { childList: true });
}
setBrothersAttrs();
});
onUnmounted(() => {
if (observer.value) 관찰자.value.disconnect();
});
const setBrothersAttrs = () => {
el = inst?.vnode.el;
어린이 = el?.parentElement?.children;
if (el && 어린이) {
for (let i = 0; i < children.length; i++) {
bro = children[i]로 놔두세요;
if (bro === el) 계속;
bro.style.zIndex = props.zIndex;
}
}
};
<p><em>// Test.vue</em></p>
<pre class="brush:php;toolbar:false;"><템플릿>
<div class="테스트">
<래퍼 이름="wrapper1" :z-index="1">
<img class="picture1" />
<div class="내부">
<래퍼 이름="wrapper2" :z-index="2">
<img 클래스="picture2" />
</래퍼>
</div>
<래퍼 이름="wrapper3" :z-index="3">
<img class="picture3" />
</래퍼>
</래퍼>
</div>
</템플릿>
<스크립트 lang="ts" 설정>
"./Wrapper.vue"에서 래퍼 가져오기;;
<p><em>// HTML 형식의 결과: </em></p>
<pre class="brush:php;toolbar:false;"><div class="테스트">
<img class="picture1" style="z-index: 1" /><!-- 래퍼3이 없으면 "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" /><!-- 래퍼3이 없으면 "z-index: 3" -->
<인용문>
<p>위 코드에서 볼 수 있듯이 Wrapper 컴포넌트는 빈 컴포넌트입니다. 그 목적은 슬롯["default"]에서 HTMLElements의 z-index를 설정하는 것입니다. </p>
</인용문>
<p>안타깝게도 useSlots()["default"]에서 하위 요소를 찾을 수 없습니다. <strong>그래서 저는 돌연변이 관찰자가 부모의 childList를 관찰하도록 하려고 했습니다. </strong></p>
<p>그 자체로는 잘 작동합니다(<em>예제의 그림 1과 그림 2처럼</em>). <strong>그러나 여러 개의 Wrapper가 함께 래핑되면 서로를 덮게 됩니다(<em>예제의 그림 3과 같이 Wrapper3에 의해 설정된 picture3의 z-index는 Wrapper1에 의해 덮어쓰기됩니다). </strong>이는 동일한 상위를 공유하므로 상위의 하위 항목이 항상 동일하다는 의미입니다. </p>
<p>이제 질문은 다시 "<strong>슬롯에 HTMLElement를 가져오는 방법</strong>"이 됩니다. vuejs 전문가가 저를 도와줄 수 있나요? </p>
P粉794177659437일 전651