렌더링 기능을 통해 vue3에서 메뉴 드롭다운 상자를 구현하는 방법

기술적 해결방안

먼저 드롭다운 박스 컴포넌트를 작성합니다

먼저 드롭다운 박스의 내용을 표시하는 컴포넌트를 작성합니다. 구성 요소 이름은 로 시작합니다. Select.vue

<template>
  <div class="select-wrap">
    <span>福利商城</span>
    <span>Saas平台</span>
    <span>活动定制</span>
  </div>
</template>

Rendering 구성 요소

웹 페이지에서 이 구성 요소를 렌더링하려면 작업이 다음과 같아야 합니다.

마우스가 제품 서비스로 이동하면, 페이지의 적절한 위치에 구성 요소 인스턴스로 렌더링된 드롭다운 상자 구성 요소를 이동합니다.

vue3에서는 Vonde를 렌더링할 때 핵심 로직은 다음과 같습니다.

import { createVNode, h, render, VNode } from 'vue'
import component from "./component.vue"
//1、创造包裹虚拟节点的div元素
const container = document.createElement('div');
//2、创造虚拟节点
vm = createVNode(component)
//3、将虚拟节点创造成真实DOM
render (vm, container)
//4、将渲染的结果放到body下
document.body.appendChild(container.firstElementChild)

컴포넌트 렌더링 위치를 알려면 상위 컴포넌트(즉, 제품 서비스의 돔 위치)를 알아야 합니다. 상위 구성 요소의 DOM 정보를 얻으려면

// App.vue
<div ref="select">
  <span class="name">产品服务</span> 
</div>
<script setup >
  import { ref } from "vue"
  const select = ref()
</script>

제품 서비스 요소 위로 마우스를 이동하면 드롭다운 상자가 렌더링됩니다.

// App.vue
<div ref="select">
  <span class="name">产品服务</span> 
</div>
<script setup >
import { ref } from "vue"
import Select from "./Select.vue"
const select = ref()
function createDom(){
  //1、创造包裹虚拟节点的div元素
  const container = document.createElement(&#39;div&#39;);
  //2、创造虚拟节点
  let vm = createVNode(Select)
  //3、将虚拟节点创造成真实DOM
  render (vm, container)
  //4、将渲染的结果放到body下
  document.body.appendChild(container.firstElementChild) 
}
</script>

그런 다음 위치 판단을 추가합니다.

function createDom(){
  const left = select.value.offsetLeft + "px"
  const width = select.value.getBoundingClientRect().left + "px"
  const props = {
    width,
    left,
  }
  //1、创造包裹虚拟节点的div元素
  const container = document.createElement('div');
  //2、创造虚拟节点
  let vm = createVNode(Select,props)
  //3、将虚拟节点创造成真实DOM
  render (vm, container)
  //4、将渲染的结果放到body下
  document.body.appendChild(container.firstElementChild) 
}

그 중 prop은 Select 컴포넌트에 전달되는 거리 매개변수입니다. , 구성 요소에 설정되어 있습니다.

컴포넌트를 파괴합니다

컴포넌트를 파괴하려면 렌더를 사용하여 빈 객체를 렌더링할 수 있습니다

render (vm, container)

자식 컴포넌트가 자체적으로 파괴되어야 하는 경우 상위-하위 값 전송을 사용할 수 있습니다

<template>
  <div class="select-wrap" @mouseleave="beforeUnload">
    <span>福利商城</span>
    <span>Saas平台</span>
    <span>活动定制</span>
  </div>
</template>
<script   setup>
const emit = defineEmits([&#39;destroy&#39;])
function beforeUnload(){
 emit(&#39;destroy&#39;)
}
</script>

상위 컴포넌트에서, onDestroy 함수에 소품을 추가해야 합니다. 참고: onDestroy는 카멜 표기법으로 작성되었습니다

function createDom(){
  const left = select.value.offsetLeft + "px"
  const width = select.value.getBoundingClientRect().left + "px"
  const props = {
    width,
    left,
    onDestroy: () => {
      render(null, container)
    },
  }
  //1、创造包裹虚拟节点的div元素
  const container = document.createElement('div');
  //2、创造虚拟节点
  let vm = createVNode(Select,props)
  //3、将虚拟节点创造成真实DOM
  render (vm, container)
  //4、将渲染的结果放到body下
  document.body.appendChild(container.firstElementChild) 
}

위 내용은 렌더링 기능을 통해 vue3에서 메뉴 드롭다운 상자를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!