背景說明
鼠標移動到產品服務上時，出現標紅的下拉框。
使用純css的方案實現最簡單，但是沒什么技術含量，棄之；使用第三方組件庫，樣式定制麻煩棄之。因此，我們使用vue3直接在頁面創建一個dom作為下拉框吧。
技術方案
先寫一個下拉框組件
首先，我們先寫一個組件，用來展示下拉框內容。組件名稱起為 ：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、將虛擬節點創造成真實DOMrender (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、將虛擬節點創造成真實DOMrender (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>
```js父組件里，我們需要在props中添加一個onDestroy函數，注意：onDestroy是駝峰式寫法```js
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、將虛擬節點創造成真實DOMrender (vm, container)//4、將渲染的結果放到body下document.body.appendChild(container.firstElementChild)
}
這樣，就實現了下拉框組件
)
