这篇文章主要介绍“vue3怎么通过render函数实现菜单下拉框”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue3怎么通过render函数实现菜单下拉框”文章能帮助大家解决问题。
技术方案
先写一个下拉框组件
首先,我们先写一个组件,用来展示下拉框内容。组件名称起为 :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) }