首先，我們先寫一個元件，用來展示下拉框內容。元件名稱起為：Select.vue
<template>
<div class="select-wrap">
<span>福利商城</span>
<span>Saas平台</span>
<span>活动定制</span>
</div>
</template>
我們要將這個元件渲染在網頁上，操作應該是這樣的：
當滑鼠移到產品服務時，將下拉方塊元件作為一個元件實例渲染在頁面的合適位置。在
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位置），我們透過ref來取得父組件的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('div');
//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渲染一個空物件即可
render (vm, container)
如果需要子元件來銷毀自身，我們可以使用父子傳值
<template>
<div class="select-wrap" @mouseleave="beforeUnload">
<span>福利商城</span>
<span>Saas平台</span>
<span>活动定制</span>
</div>
</template>
<script setup>
const emit = defineEmits(['destroy'])
function beforeUnload(){
emit('destroy')
}
</script>父元件裡，我們需要在props中加入一個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怎麼透過render函數實現選單下拉框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
