当前位置：

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

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

作者：吹吹风会发光时间：2025-04-21 来源：正软商城浏览：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) 
}

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系bd@zhengruan.com

作者最新文章

漫蛙网页版免费进入地址分享 2026-10-13 13:16

漫蛙manwa官方网站入口 2026-10-13 13:15

Typora怎么插入表格?Ctrl+T快速建表并调整行列 2026-10-05 17:59

2026年好用的思维导图软件推荐：高效实用排行榜 2026-09-30 13:14

寻简思维导图手机版设置在主题框中插入公式的方法 2026-09-30 13:03

编程开发 Vue3

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

下一篇：快手怎么挂小黄车卖东西-快手挂小黄车卖东西的方法

相关文章更多

如何从零开始搭建vue3项目

说明记录一次Vue3的项目搭建过程。文章基于vue3.2.6和vite2.51版本，使用了ui库Elementplus，vue-router4，Layout布局封装，axios请求封装，别名配置等。开始1.使用vscode开发工具安装vue3的插件Volar，在vue2中我们使用的是Vetur。vue3在线code工具传送门sfc.vuejs.org/2.执行初始化及安装命令：npminitvite初始化vite此过程可以输入项目名、选择vue/react项目及js/ts环境选择，vue3已经完全支持ts

2025-07-05 2 BrightSoul

vue3中getCurrentInstance怎么使用

父组件中：1.setup语法糖中导入子组件2.在子组件标签上绑定ref值3.setup内部从vue中按需导出getCurrentInstance方法4.调用getCurrentInstance方法导出proxy5.通过proxy.$refs.子组件ref名.子组件内属性/方法实现调用子组件count+1import{getCurrentInstance,ComponetInternalInstance,ref}from"vue";importChildfrom"./zi.vue";constchild=r

2025-06-02 0 小宇宙叶知秋

怎么使用vue3搭建后台系统

首先使用npm或者yarn创建一个vue项目//使用npm创建一个基于vite构建的vue项目npmcreatevite@latest//使用yarn创建一个基于vite构建的vue项目yarncreatevite@latest在创建的构成中选择vuevue-ts创建完之后将项目拖到编译器打开一、配置vite在vite.config.ts文件中配置项目的服务数据，配置如下：//此处配置项目服务参数server:{host:"0.0.0.0",//项目运行地址，此处代表localhostport:8888,

2025-05-28 0 RainLight

Vue3基于countUp.js怎么实现数字滚动的插件

countUp简介CountUp.js是一种无依赖项的轻量级JavaScript类，可用于快速创建以更有趣的方式显示数字数据的动画。CountUp可以在两个方向上进行计数，具体取决于传递的开始和结束值。虽然现在市面上基于countUp.js二次封装的Vue组件不在少数，但我个人是不太喜欢使用这些第三方封装的，因为第三方组件的更新频率很难保证，也许作者只是一时兴起封装上传了，并未打算继续维护，如果使用了等于后续根本没有维护性了，所以这种二次封装我推荐自行实现，我们可以通过本次封装熟悉一下vue3,ts的语法

2025-05-25 0 NorthPath

vue3中addRoute路由变化但页面未更新如何解决

解决办法，每次addRoute时深复制组件对象importtimefrom"../views/time"functioncopyObj(obj){if(typeofobj=="object"){if(Array.isArray(obj)){letarr=[];for(letitemofobj){arr.push(Object.assign(copyObj(item)));}returnarr;}elseif(obj==null){returnnull;}else{letobj1={};for(letind

2025-05-24 0 小月亮

怎么将Vue3 Axios拦截器封装成request文件

1、创建一个名为request.js的新文件，并导入Axios：importaxiosfrom'axios';2、创建一个名为request的函数，并将其导出：这将创建一个名为request的函数，并将其设置为具有基本URL的新的Axios实例。要在封装的Axios实例中添加超时设置，可以在创建Axios实例时传递timeout选项。exportconstrequest=axios.create({baseURL:'https://example.com/api',time

2025-05-20 3 OpenWorld

axios Vue3

Vue3侦听器的实现原理是什么

侦听响应式对象前面我们聊到计算属性，它可以自动计算并缓存响应式数据的值。而如果我们仅需要在响应式数据变化时，执行一些预设的操作，就可以使用watch侦听器。我们还是先来实现一个最简单的例子，然后来一点一点扩充它。constdata={foo:1}constobj=reactive(data)watch(obj,()=>{console.log('obj已改变')})在这个例子中，我们使用了watch侦听器，当obj的属性被改变时，控制台应该会打印出obj已改变。基于前面我们对计算属性的实现

2025-05-17 0 SunnyJourney

vue3中的createApp怎么使用

函数定义createApp函数定义在文件packages/runtime-dom/src/index.ts中exportconstcreateApp=((...args)=>{constapp=ensureRenderer().createApp(...args)if(__DEV__){injectNativeTagCheck(app)injectCompilerOptionsCheck(app)}const{mount}=appapp.mount=(containerOrSelector:Element

2025-05-16 1 小月亮

vue3中＜script setup＞和setup函数的区别是什么

是在单文件组件(SFC)中使用组合式API的编译时语法糖。当同时使用SFC与组合式API时该语法是默认推荐。相比于普通的语法，它具有更多优势：更少的样板内容，更简洁的代码。能够使用纯TypeScript声明props和自定义事件。更好的运行时性能(其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。更好的IDE类型推导性能(减少了语言服务器从代码中抽取类型的工作)。以上是vue3官网对的说明，其实＜scriptsetup＞就是setup函数的一个语法糖。一、基本语法setup函数的写法im

2025-05-15 4 若安舟已远

Vue3进阶主题Composition API如何使用

什么是CompositionAPICompositionAPI是Vue3中引入的一种新的API风格，旨在提高代码的可读性、可维护性和可重用性。CompositionAPI不同于Vue2中的OptionsAPI，它采用了一种基于函数的编程方式，将组件内的逻辑分解成更小的可组合函数单元，以实现更加灵活和高效的代码组织方式。为什么Vue3推荐使用CompositionAPIVue3推荐使用CompositionAPI的主要原因是为了更好地组织和重用组件逻辑。在Vue2中，我们通常使用OptionsAPI，其中我

2025-05-13 4 小宇宙叶知秋

API Vue3

热门文章更多

Photoshop蒙版换证件照背景颜色怎么改？实用操作步骤详解 AutoCAD绘制机械零件三维实体详细教程 AE教程书籍挑选指南：零基础、动效与合成方向实战标准 Photoshop图层合并快捷键是什么？合并盖印及分开图层方法 Photoshop日系调色教程：小清新风格参数与思路

精品专题更多

装机必备

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

Windows

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

PDF教程

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

Mac软件更多

Postman macOS版

Mac

Postman是一套面向API全生命周期的开发与测试平台，可在Mac上发送和调试多种协议请求，管理集合、环境及认证信息，并完成脚本测试、模拟服务、监控、文档发布和团队协作。它适合开发、测试及运维人员使用，提供个人免费方案。

Docker Desktop macOS版

Mac

Docker Desktop 是 Docker 官方为 Mac 提供的容器开发环境，集成 Docker Engine、命令行工具、Compose、Build、Kubernetes 与图形化管理界面。

Android Studio macOS版

Mac

Android Studio 是 Google 面向安卓应用开发提供的官方集成开发环境，基于 IntelliJ IDEA 构建。它整合智能代码编辑、Gradle 构建、界面预览、设备模拟、性能分析、调试测试及 APK 分析等工具。

WINDOWS 更多

PixPix 网页版

Windows

PixPix 是面向品牌、卖家和内容团队的在线 AI 图片视频创作平台，提供图视频 Agent、无限画布、图片生成、视频生成、自然语言编辑及商品套图、产品精修和带货视频等电商工具。

Postman Windows版

Windows

Postman 是面向 API 全生命周期的开发与协作平台。Windows 桌面版可用于构建和发送 HTTP、GraphQL、gRPC、WebSocket、MQTT 等请求，并提供环境变量、集合、脚本测试、模拟服务、监控、文档及团队工作区等

Docker Desktop Windows版

Windows

Docker Desktop 为 Windows 开发者提供集成式容器环境，内置 Docker Engine、命令行工具、Compose、Build 与 Kubernetes 等组件，可在本机完成镜像构建、容器运行、日志查看和资源管理。