vue3怎么通过render函数实现菜单下拉框

时间：2023-05-10 20:18

技术方案

先写一个下拉框组件

首先，我们先写一个组件，用来展示下拉框内容。组件名称起为 ：Select.vue

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

vue3怎么通过render函数实现菜单下拉框

渲染组件

我们要将这个组件渲染在网页上，操作应该是这样的：

当鼠标移动到产品服务时，将下拉框组件作为一个组件实例渲染在页面的合适位置。

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、将虚拟节点创造成真实DOMrender (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函数实现菜单下拉框的详细内容，更多请关注Gxl网其它相关文章！