vue3通过render函数实现一个菜单下拉框

news2024/11/16 0:52:37

背景说明

鼠标移动到产品服务上时,出现标红的下拉框。

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

这样,就实现了下拉框组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/690184.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【经验分享】Docker容器部署方法说明

前 言 本案例适用开发环境&#xff1a; Windows开发环境&#xff1a;Windows 7 64bit、Windows 10 64bit Linux开发环境&#xff1a;Ubuntu 18.04.4 64bit 虚拟机&#xff1a;VMware15.1.0 Docker是一个开源的应用容器引擎&#xff0c;让开发者可打包他们的应用以及依赖包…

rust持续学习 声明宏

学习记录&#xff0c;都是学自圣经&#xff0c;macrobook啥的 https://doc.rust-lang.org/reference/macros-by-example.html macro_rules! bar {(3) > {println!("3");};(4) > {println!("4");}; }这个是入门例子&#xff0c;有点像match 调用就是…

【Java|多线程与高并发】线程池详解

文章目录 1. 线程池简介2. 创建线程池3. 工厂模式简介4. 线程池的使用5. 实现线程池6. ThreadPoolExecutor的构造方法讲解7. 线程池的线程数量,如何确定? 1. 线程池简介 Java线程池是一种用于管理和重用线程的机制&#xff0c;它可以在需要执行任务时&#xff0c;从线程池中获…

二叉树遍历方法——前、中、后序遍历(java)

二叉树结构&#xff1a; static class TreeNode{public char val;public TreeNode left;public TreeNode right;public TreeNode(char val) {this.val val;}Overridepublic String toString() {return this.val"";}} 一、前序遍历 前序遍历是一种访问二叉树的每一…

【shell脚本】沐风晓月跟你聊聊shell脚本中的case实战

前言 前面我们已经介绍了while及for循环&#xff0c;结合if语句可以构建一些简单的控制面板及菜单脚本&#xff0c;今天我们来探讨下case语句。 case选择语句&#xff0c;主要用于对多个选择条件进行匹配输出&#xff0c;与if elif语句结构类似&#xff0c;通常用于脚本传递输…

阵列模式合成第 I 部分:清零、窗口化和细化(附源码)

一、前言 本示例说明如何使用相控阵系统工具箱解决一些阵列合成问题。在相控阵设计应用中&#xff0c;通常需要找到一种方法来逐渐减小晶片响应&#xff0c;以使最终的阵列阵列模式满足某些性能标准。典型的性能标准包括主瓣位置、零位置和旁瓣电平。 二、使用旁瓣消除器消除干…

两个进程定时通过共享内存进行通信

进程1-client #include <stdio.h> #include <stdlib.h> #include <sys/ipc.h> #include <sys/shm.h> #include <unistd.h> #include <string.h>#define SHM_SIZE 10 * 1024 * 1024 // 共享内存大小为10M #define WRITE_INTERVAL 1 …

PHP 基础知识

目录 PHP基础 2 PHP代码标记 2 PHP注释 2 PHP语句分隔符 2 PHP变量 3 常量 3 数据类型 4 流程控制 6 文件 7 函数 9 闭包 11 常用系统函数 12 错误处理 13 错误显示设置 15 字符串类型 17 字符串相关函数 19 数组 21 遍历数组 22 数组的相关函数 25 PHP基础 PHP是一种运行在服务…

通过netty源码带你一步步剖析NioEventLoop 的任务队列原理

NioEventLoop 的异步任务队列成员: NioEventLoop 中对newTaskQueue 接口的实现,返回的是JCTools工具包Mpsc队列(多生产者单一消费者无锁队列,(无界和有界都有实现) private static Queue<Runnable> newTaskQueue0(int maxPendingTasks) {// newMpscQueue 无界对列,newM…

10万元存款是年轻人的一个“坎”?存款超过10万就会超过53.7%的人?不要焦虑,以过来人的身份帮你分析分析!

&#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Micro麦可乐的博客 &#x1f425;《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程&#xff0c;入门到实战 &#x1f33a;《RabbitMQ》…

ChatGPT最新版实现多样化聚合文章的批量生成文章

随着人工智能技术的不断发展&#xff0c;ChatGPT最新版在多样化聚合文章的批量生成方面取得了重要突破。本文将从随机选取的8个方面&#xff0c;对ChatGPT最新版的构建思想进行详细阐述。这些方面包括&#xff1a;自然语言处理、大规模数据集、迁移学习、多模态输入、生成模型优…

JS将图片转pdf,jspdf的使用

Hi I’m Shendi 最近做转换工具&#xff0c;需要将图片转pdf&#xff0c;这里记录下来 JS将图片转pdf&#xff0c;jspdf的使用 简介 A library to generate PDFs in JavaScript. 一个用JavaScript生成PDF的库。 下载 在网站或github下载 https://parall.ax/products/jspdf …

图像增强之图像锐化(边缘增强)之sobel算子

note matx (-1,0,1;-2,0,2;-1,0,1) maty (-1,-2,-1;0,0,0;1,2,1) code // 图像增强之图像锐化(边缘增强)之sobel算子 void GetSobelMat(Mat& sobelX, Mat& sobelY) {sobelX (Mat_<int>(3,3) << -1,0,1,-2,0,2,-1,0,1);sobelY (Mat_<int>(3,3…

【面试】数据仓库

数据分层 维度建模 (0) 什么是维度建模&#xff1f; 维度建模以分析决策的需求出发构建模型&#xff0c;构建的数据模型为分析需求&#xff08;也就是我们通常所说的数据分析&#xff09;服务。它重点解决如何更快速完成分析需求&#xff0c;同时还有较好的大规模复杂查询的响…

品达通用权限系统-Day01

文章目录 1. 项目概述1.1 项目介绍1.2 业务架构1.3 技术架构1.4 环境要求 2. Spring Boot starter2.1 starter介绍2.2 starter原理2.2.1 起步依赖2.2.2 自动配置2.2.2.1 基于Java代码的Bean配置2.2.2.2 自动配置条件依赖2.2.2.3 Bean参数获取2.2.2.4 Bean的发现2.2.2.5 Bean的加…

NXP i.MX 8M Plus工业开发板规格书(四核ARM Cortex-A53 + 单核ARM Cortex-M7,主频1.6GHz)

1 评估板简介 创龙科技TLIMX8MP-EVM是一款基于NXP i.MX 8M Plus的四核ARM Cortex-A53 单核ARM Cortex-M7异构多核处理器设计的高性能工业评估板&#xff0c;由核心板和评估底板组成。ARM Cortex-A53(64-bit)主处理单元主频高达1.6GHz&#xff0c;ARM Cortex-M7实时处理单元主…

【Java】如何在 Java 中使用条件运算符

本文仅供学习参考&#xff01; 相关教程地址&#xff1a; http://c.biancheng.net/view/792.html https://www.cnblogs.com/bmbm/archive/2012/01/16/2342239.html 在软件开发中&#xff0c;运算符处理表达式中的一个或多个操作数。Java 编程语言支持以下类型的运算符&#xff…

HTML5、JS实现元素拖拽排序

先介绍一下html5的drag属性,拖放&#xff08;Drag 和 drop&#xff09;是 HTML5 标准的组成部分。想要启用drag&#xff0c;只要给元素加上draggable"true"就行了&#xff08;Safari 5.1.2除外&#xff09;。 拖动事件 事件分为两类&#xff0c;当前拖动的元素上的事…

【Makefile】解析Makefile:驾驭自动编译的力量

Makefile简介 一个工程中的源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;makefile定义了一系列的规则来指定&#xff0c;哪些文件需要先编译&#xff0c;哪些文件需要后编译&#xff0c;哪些文件需要重新编译&#xff0c;甚至于进行更复杂的…

你如何理解 JS 的继承?

在JavaScript中&#xff0c;继承是一种机制&#xff0c;允许一个对象&#xff08;子类&#xff09;从另一个对象&#xff08;父类&#xff09;继承属性和方法。这使得子类可以共享父类的功能&#xff0c;并有能∧自身定义新的功能。 JavaScript中的继承通过原型链实现。 具体来…