当前位置：

首页 > 编程开发 > vue3怎么通过render函数实现菜单下拉框

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

作者：吹吹风会发光时间：2024-04-12 浏览：0

技术方案先写一个下拉框组件首先，我们先写一个组件，用来展示下拉框内容。组件名称起为：Select.vue福利商城Saas平台活动定制渲染组件我们要将这个组件渲染在网页上，操作应该是这样的：当鼠标移动到产品服务时，将下拉框组件作为一个组件实例渲染在页面的合适位置。vue3中，渲染一个Vonde，核心逻辑如下：import{createVNode,h,render,VNode}from'vue'importcomponentfrom"./component.vue"//1、创造包裹虚拟节点的d

技术方案

先写一个下拉框组件

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

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、将虚拟节点创造成真实DOM
render (vm, container)
//4、将渲染的结果放到body下
document.body.appendChild(container.firstElementChild)

要知道组件渲染的位置，我们必须知道父组件（也就是产品服务的dom位置），我们通过ref来获取父组件的dom信息。

// App.vue

  产品服务

import { ref } from "vue" const select = ref()

当鼠标移到产品服务元素上时，渲染下拉框，我们添加个函数

// App.vue

  产品服务

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) }

然后，添加下位置判断

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)

如果需要子组件来销毁自身，我们可以使用父子传值



const emit = defineEmits(['destroy'])
function beforeUnload(){
 emit('destroy')
}

父组件里，我们需要在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) 
}

本文内容来源于互联网，如有侵权请联系删除。

作者最新文章

iphone蓝牙连接ipad有什么用及连接方法教程 2026-09-21 17:28

PDF怎么取消密码保护？4种解锁方法整理 2026-09-08 18:23

三星 Galaxy Z Fold8 内屏边角支撑偏软？实测与官方回应 2026-09-08 16:39

手机Excel表格制作教程：小屏幕高效录入与格式调整指南 2026-09-04 09:27

PDF文档按页转换成图片怎么做？在线转换步骤整理 2026-09-03 11:06

编程开发

上一篇：苹果12mini手机在哪设置自动调节亮度苹果12mini开启自动调节屏幕亮度方法

下一篇： 3dmax动画制作入门教程：流程步骤与实例详解

相关文章更多

claude code install mac Mac版安装教程

AI编程助手命令行工具

09.22

flutter状态管理原理是什么及运行机制详解

Flutter 前端开发状态管理

09.22

skyvern官网入口及中文版使用教程

Docker Python

09.22

codex claude code插件安装与使用教程

AI编程助手 Codex

09.22

GitLab配置SSH免密登录步骤详解

gitlab 开发者工具

09.22

PHP发送HTTP请求的方法及完整代码教程

PHP curl Http请求 API调用

09.22

codex插件推荐有哪些？实用插件选择与安装教程

VS Code 编程效率插件安装

09.22

html写提交成功页面代码及完整实现方法

html 前端开发用户体验

09.22

selenium打开浏览器会有没有缓存怎么解决

浏览器缓存 Selenium 自动化测试

09.22

langgraph agent chat ui搭建与使用教程

Python

09.22

热门文章更多

Yandex中文入口及登录使用全攻略 51漫画高清入口及最新章节更新 B站免费入口永久有效网址推荐 58动漫网入口及永久访问方法 B站免费入口网站高效连接方法蓝海书屋免费小说全本阅读推荐入口

精品专题更多

本月促销

正软商城本月促销专区，汇集办公、设计、安全、影音、系统工具及AI软件等正版软件优惠活动，提供限时折扣、特价授权和优惠购买信息，活动库存及价格以页面实时展示为准。

装机必备

正软商城装机必备专区，精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件，帮助用户快速完成新电脑软件配置。

Windows

正软商城Windows软件专区，汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件，提供软件介绍、系统要求、正版授权及购买下载服务。

macOS软件

正软商城macOS软件专区，精选适用于Mac电脑的办公、设计、影音、效率、开发和系统工具，提供软件功能介绍、macOS兼容版本、正版授权及购买下载服务。

IOS软件

正软商城iOS软件专区，精选适用于iPhone和iPad的办公、学习、影音、设计、效率及AI应用，提供功能介绍、适用设备、系统要求和正版获取方式等信息。

正软商城AI软件专区，汇集AI写作、AI绘画、AI视频、AI办公、AI编程、AI翻译、智能客服和数据分析等人工智能工具，提供功能介绍、适用平台、收费方式及正版购买信息。

PDF教程

正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法，同时介绍常用PDF软件和工具的使用技巧。

Mac软件更多

灵活计算器

灵活计算器是一款笔记式算数应用，支持实时计算、动态关联和云端同步功能。记录、整理和输出之间的过渡会更自然，适合长期写作、做笔记或持续沉淀个人内容。

macOS软件 Android IOS软件装机必备

赤友清理大师

赤友清理大师是一款为 Mac 设计的智能清理优化工具，可精准扫描垃圾、大文件、重复文件等，释放磁盘空间。做扫描整理、文字提取和表格转换时，它能把识别后的处理步骤接得更顺，资料录入这类场景会省下不少时间。

macOS软件装机必备

极度公式

极度公式是一款跨平台专业LaTeX公式识别编辑软件，支持OCR公式识别和多平台编辑。和使用说明，避免使用，享受完整功能与稳定支持。做扫描整理、文字提取和表格转换时，它能把识别后的处理步骤接得更顺，资料录入这类场景会省下不少时间。

Windows macOS软件 Linux 装机必备

图几

图几是一款适用于 macOS 的截图、标注与美化工具，支持离线操作保障隐私。界面整理和高频系统操作被放到一起考虑，桌面或窗口内容一多时，管理起来会更省心。

macOS软件装机必备

密码键盘

密码键盘是一款兼具安全性与便捷性的高效密码管理器。日常使用里的持续防护和信息管理会更突出，适合把安全控制放进长期使用流程中的场景。

Windows macOS软件 Android IOS软件装机必备

思源笔记

思源笔记是一款本地笔记软件，提供所见即所得的编辑方式，为长文写作带来顺滑的体验。记录、整理和输出之间的过渡会更自然，适合长期写作、做笔记或持续沉淀个人内容。

Windows macOS软件 Android IOS软件装机必备

Office 365 简体中文

一款文字处理软件，一种订阅式的跨平台办公软件，基于云平台提供多种服务，通过将 Excel 和 Outlook 等应用与 OneDrive 和 Microsoft Teams 等强大的云服务相结合，Office 365 可让任何人使用任何设备随时随地创建和共享内容。

WALTR PRO

WALTR是一款电脑至iOS文件传输转换工具，操作简单，快速实现文件识别与传送。做扫描整理、文字提取和表格转换时，它能把识别后的处理步骤接得更顺，资料录入这类场景会省下不少时间。

Windows macOS软件 Pro

CodeExpander

CodeExpander 是一款快捷短语输入增强工具，通过键入缩写自动展开为自定义文段，提升工作效率。任务管理和过程控制会更完整，持续下载、批量同步或需要稳定传输流程的场景会更适合它。

Windows macOS软件

Mountain Duck

Mountain Duck 是一款能将多个网盘挂载到本地的工具，像本地磁盘一样使用网盘。清理链路的完整性会更好一些，做应用卸载、残留处理和空间整理时，通常能少走很多手动排查步骤。

Windows macOS软件

Menuist

Menuist 是一款面向 macOS 的 Finder 右键菜单增强工具，主要用来补充新建文件、快捷导航等常用操作，让日常文件管理和访问路径时更高效、更顺手。

macOS软件

Mole

Mole 是一款专为 Mac 设计的深度清理优化工具，涵盖缓存清理、应用管理及实时状态监控等功能。清理链路的完整性会更好一些，做应用卸载、残留处理和空间整理时，通常能少走很多手动排查步骤。

macOS软件

WINDOWS 更多

Windows 10

Windows 10 是一款微软推出的经典操作系统，拥有硬件兼容性与多任务处理能力。它更偏向把系统状态查看和常用调节动作放在一起，适合需要持续观察和微调设备状态的场景。

Windows 10 Windows 操作系统装机必备

极度公式

Windows macOS软件 Linux 装机必备

密码键盘

密码键盘是一款兼具安全性与便捷性的高效密码管理器。日常使用里的持续防护和信息管理会更突出，适合把安全控制放进长期使用流程中的场景。

Windows macOS软件 Android IOS软件装机必备

思源笔记

Windows macOS软件 Android IOS软件装机必备

傲梅轻松备份

傲梅轻松备份是一款专业易用的数据备份软件，为重要数据提供安全保障。日常使用里的持续防护和信息管理会更突出，适合把安全控制放进长期使用流程中的场景。

Windows 装机必备

Office 365 简体中文

Wise Folder Hider Pro

Wise Folder Hider Pro 是一款专业级文件和文件夹隐藏加密软件，为私密数据添加多重保护。高频操作更强调就近处理，浏览、整理和跨目录移动文件时，来回切换和重复点击都会少很多。

Windows Pro

WALTR PRO

Windows macOS软件 Pro

CodeExpander

Windows macOS软件

PinStack

PinStack是一款轻量级的Windows平台剪贴板管理工具，优化您的剪贴板使用体验。它更偏向把系统状态查看和常用调节动作放在一起，适合需要持续观察和微调设备状态的场景。

Windows

Mountain Duck

Windows macOS软件

Seer

Seer是一款在Win平台下的空格键功能增强效率工具，只需轻敲空格键，就能预览几乎任何格式的文件。它更适合把零散的小功能集中起来使用，处理高频琐碎任务时会更省事。

Windows