vue3通过render函数实现菜单下拉框的示例
更新时间：2023年04月14日 15:34:20 作者：拾荒草
本文主要介绍了vue3通过render函数实现菜单下拉框的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
背景说明
鼠标移动到产品服务上时，出现标红的下拉框。
使用纯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菜单下拉框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
利用Vue3+Element-plus实现大文件分片上传组件
在开发中如果上传的文件过大,可以考虑分片上传,分片就是说将文件拆分来进行上传,将各个文件的切片传递给后台,然后后台再进行合并,下面这篇文章主要给大家介绍了关于利用Vue3+Element-plus实现大文件分片上传组件的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue中使用mockjs配置和使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
修改el-form-item中的label里面的字体边距或者大小问题
这篇文章主要介绍了修改el-form-item中的label里面的字体边距或者大小问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了关于VueRouter导入的全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了vue项目中使用openlayers创建地图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家介绍了Vue之生命周期函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
最近遇到一个需求,在 Vue3 的一个 H5 页面当中点击拖拽图标上下拖动 tab 子项,然后点击保存可以保存最新的 tab 项顺序,同事说可以用 vue-draggable-plus 这个库来实现拖拽,所以本文给大家介绍了如何使用vue-draggable-plus实现拖拽排序,需要的朋友可以参考下2024-01-01
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
根据vue-music视频中slider组建的使用，当安装新版本的better-scroll，轮播组件，不能正常轮播。如何解决这个问题呢，下面小编给大家带来了vue-music 使用better-scroll遇到轮播图不能自动轮播问题，感兴趣的朋友一起看看吧2018-12-12
vue3+vite+ts使用require.context问题
这篇文章主要介绍了vue3+vite+ts使用require.context问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vuex是专门为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于vuex中5个属性使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
最新评论