返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue3通过render函数实现菜单下拉框的示例
  • 744
分享到

vue3通过render函数实现菜单下拉框的示例

vue3render菜单下拉框vue3菜单下拉框 2023-05-16 11:05:58 744人浏览 独家记忆
摘要

目录背景说明技术方案先写一个下拉框组件渲染组件销毁组件背景说明 鼠标移动到产品服务上时,出现标红的下拉框。 使用纯CSS的方案实现最简单,但是没什么技术含量,弃之;使用第三方组件库

背景说明

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

使用纯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>

父组件里,我们需要在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函数实现菜单下拉框的示例的文章就介绍到这了,更多相关vue3 render菜单下拉框内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue3通过render函数实现菜单下拉框的示例

本文链接: https://www.lsjlt.com/news/209633.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue3通过render函数实现菜单下拉框的示例
    目录背景说明技术方案先写一个下拉框组件渲染组件销毁组件背景说明 鼠标移动到产品服务上时,出现标红的下拉框。 使用纯css的方案实现最简单,但是没什么技术含量,弃之;使用第三方组件库...
    99+
    2023-05-16
    vue3 render菜单下拉框 vue3 菜单下拉框
  • vue3怎么通过render函数实现菜单下拉框
    这篇文章主要介绍“vue3怎么通过render函数实现菜单下拉框”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue3怎么通过render函数实现菜单下拉框”文章能帮助大家解决问题。技术方案先写一个...
    99+
    2023-07-06
  • JavaScript实现下拉菜单的显示隐藏
    本文实例为大家分享了JavaScript实现下拉菜单显示隐藏的具体代码,供大家参考,具体内容如下 有时需要这种页面效果: 鼠标移动到元素上面时,实现下拉菜单 鼠标移开元素后,下拉菜单...
    99+
    2024-04-02
  • 如何通过纯CSS实现导航栏的下拉菜单效果
    如何通过纯CSS实现导航栏的下拉菜单效果在Web设计中,导航栏是一个非常常见的组件,而下拉菜单则是导航栏中的一种常见效果。在本文中,我们将学习如何仅使用CSS来实现导航栏的下拉菜单效果,并提供详细的代码示例。首先,我们需要一个基本的导航栏结...
    99+
    2023-10-27
    导航栏 纯CSS 下拉菜单效果
  • Vue实现全局菜单搜索框的示例
    目录前言一、过滤路由二、搜索框展示路由三、雏形出现但有缺陷四、优化搜索方式五、完整代码展示结论前言 本篇文章分享一下我在实际开发 Vue 项目时遇到的需要 —&mdash...
    99+
    2023-02-09
    Vue 全局菜单搜索框 Vue 搜索框
  • element-plus下拉框实现全选的示例代码
    目录前言下拉框的简单使用全选互斥下拉框多选全选互斥的实现多个下拉框互斥一般全选的实现前言 实习确实能学到不少东西,但是学到的东西果然还是需要沉淀下来,不然后面立马又忘记了。 下拉框的...
    99+
    2024-04-02
  • JavaScript实现鼠标经过显示下拉框的方法
    这篇文章主要介绍了JavaScript实现鼠标经过显示下拉框的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下代码:<!DOCTYPE html...
    99+
    2023-06-14
  • js,jq,css多方面实现简易下拉菜单功能的示例分析
    这篇文章主要介绍js,jq,css多方面实现简易下拉菜单功能的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图预览一 、css实现html代码部分<!DOCTYPE...
    99+
    2024-04-02
  • vue+element实现下拉菜单并带本地搜索功能示例详解
    需求: 后台返回数组对像,前端组合成数组,根据name组合成一个个数组并把后台返回的值当成一个children推入数组,在数组中自定义属性备份数据防止搜索的时候改变原数组使得数组无...
    99+
    2024-04-02
  • ajax中怎么通过读取数据库内容实现二级联动下拉选择菜单
    ajax中怎么通过读取数据库内容实现二级联动下拉选择菜单,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。复制代码 代码如下:<PRE ...
    99+
    2024-04-02
  • Vue封装远程下拉框组件的实现示例
    之前封装了一个远程搜索的输入框,静态在Vue官网看到一个类似的远程搜索下拉框,今天也封装一个远程搜索下拉框,面对不同的需求 我们修改了官方提供的代码来封装了 父组件 RemoteS...
    99+
    2024-04-02
  • android 通过MediaRecorder实现简单的录音示例
    整理文档,搜刮出一个android 通过MediaRecorder实现简单的录音示例,稍微整理精简一下做下分享。 MainActivity package com.cent...
    99+
    2022-06-06
    示例 mediarecorder Android
  • Flutter实现自定义下拉选择框的示例详解
    在一些列表页面中,我们经常会有上方筛选项的的需求,点击出现一个下拉菜单,多选、单选、列表选等,而在Flutter中,并没有现成的这样的组件,找第三方的扩展有时候又会受到一定限制,所以...
    99+
    2024-04-02
  • elementUI实现下拉选项加多选框的示例代码
    目录下拉加多选框升级—添加全部选项需求改版完善因产品需求和UI样式调整,和element自带的下拉多选有冲突,索性自己尝试修改如下: 下拉加多选框 效果如下图: 封装如下: &...
    99+
    2024-04-02
  • Vue实现下拉滚动加载数据的示例
    目录第一步:安装第二步:引用第三步:使用Web项目经常会用到下拉滚动加载数据的功能,今天就来种草 Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装...
    99+
    2024-04-02
  • 通过Mybatis实现单表内一对多的数据展示示例代码
    表:  需求:  将表中的数据,按照一级二级分类返回给前端json数据代码实现:  java代码: public class ResultIndustry { private String industryFirst;//一级行业 pri...
    99+
    2023-05-31
    mybatis 一对多
  • Android编程实现多列显示的下拉列表框Spinner功能示例
    本文实例讲述了Android编程实现多列显示的下拉列表框Spinner功能。分享给大家供大家参考,具体如下: 先上张效果图: 严格来说,这并不是一个下拉列表,只不过实现的效果...
    99+
    2022-06-06
    列表 示例 下拉列表 spinner Android
  • react+antdselect下拉框实现模糊搜索匹配的示例代码
    我们在开发过程中,经常会出现下拉框数据很多得情况,这个时候客户一个个得找就很浪费时间,那该怎么办呢? 我们可以实现一边输入一遍模糊匹配。 实现后的效果是 具体代码实现请看下面: ...
    99+
    2023-01-31
    react antd select模糊搜索 react antd select下拉框
  • Vue+ElementUI实现从后台动态填充下拉框的示例代码
    1、首先编写前端代码,将elementUI中的标签写到.vue界面中。  <el-select       v-model="xxxQuery.xxxid"       pla...
    99+
    2024-04-02
  • 在RHEL 5下通过Bind实现DNS功能的示例分析
    在RHEL 5下通过Bind实现DNS功能的示例分析,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。DNS的作用及相关概念不属于本文讨论内容,只讲述如何通过RHEL 5.1的...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作