vue3通過render函數(shù)實現(xiàn)菜單下拉框的示例

更新時間：2023年04月14日 15:34:20 作者：拾荒草

本文主要介紹了vue3通過render函數(shù)實現(xiàn)菜單下拉框的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

背景說明

鼠標移動到產(chǎn)品服務(wù)上時，出現(xiàn)標紅的下拉框。

使用純css的方案實現(xiàn)最簡單，但是沒什么技術(shù)含量，棄之；使用第三方組件庫，樣式定制麻煩棄之。因此，我們使用vue3直接在頁面創(chuàng)建一個dom作為下拉框吧。

技術(shù)方案

先寫一個下拉框組件

首先，我們先寫一個組件，用來展示下拉框內(nèi)容。組件名稱起為 ：Select.vue

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

渲染組件

我們要將這個組件渲染在網(wǎng)頁上，操作應(yīng)該是這樣的：

當鼠標移動到產(chǎn)品服務(wù)時，將下拉框組件作為一個組件實例渲染在頁面的合適位置。

vue3中，渲染一個Vonde，核心邏輯如下：

import { createVNode, h, render, VNode } from 'vue'
import component from "./component.vue"
//1、創(chuàng)造包裹虛擬節(jié)點的div元素
const container = document.createElement('div');
//2、創(chuàng)造虛擬節(jié)點
vm = createVNode(component)
//3、將虛擬節(jié)點創(chuàng)造成真實DOM
render (vm, container)
//4、將渲染的結(jié)果放到body下
document.body.appendChild(container.firstElementChild)

要知道組件渲染的位置，我們必須知道父組件（也就是產(chǎn)品服務(wù)的dom位置），我們通過ref來獲取父組件的dom信息。

// App.vue
<div ref="select">
  <span class="name">產(chǎn)品服務(wù)</span> 
</div>
<script setup >
  import { ref } from "vue"
  const select = ref()
</script>

當鼠標移到產(chǎn)品服務(wù)元素上時，渲染下拉框，我們添加個函數(shù)

// App.vue
<div ref="select">
  <span class="name">產(chǎn)品服務(wù)</span> 
</div>
<script setup >
import { ref } from "vue"
import Select from "./Select.vue"
const select = ref()
function createDom(){
  //1、創(chuàng)造包裹虛擬節(jié)點的div元素
  const container = document.createElement('div');
  //2、創(chuàng)造虛擬節(jié)點
  let vm = createVNode(Select)
  //3、將虛擬節(jié)點創(chuàng)造成真實DOM
  render (vm, container)
  //4、將渲染的結(jié)果放到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、創(chuàng)造包裹虛擬節(jié)點的div元素
  const container = document.createElement('div');
  //2、創(chuàng)造虛擬節(jié)點
  let vm = createVNode(Select,props)
  //3、將虛擬節(jié)點創(chuàng)造成真實DOM
  render (vm, container)
  //4、將渲染的結(jié)果放到body下
  document.body.appendChild(container.firstElementChild) 
}

其中，prop是傳遞給Select組件的距離參數(shù)，在組件內(nèi)設(shè)置即可。

銷毀組件

銷毀組件，我們可以使用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函數(shù)，注意：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、創(chuàng)造包裹虛擬節(jié)點的div元素
  const container = document.createElement('div');
  //2、創(chuàng)造虛擬節(jié)點
  let vm = createVNode(Select,props)
  //3、將虛擬節(jié)點創(chuàng)造成真實DOM
  render (vm, container)
  //4、將渲染的結(jié)果放到body下
  document.body.appendChild(container.firstElementChild) 
}

這樣，就實現(xiàn)了下拉框組件

到此這篇關(guān)于vue3通過render函數(shù)實現(xiàn)菜單下拉框的示例的文章就介紹到這了,更多相關(guān)vue3 render菜單下拉框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: