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

背景说明

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

使用纯css的方案实现最简单,但是没什么技术含量,弃之;使用第三方组件库,样式定制麻烦弃之。因此,我们使用vue3直接在页面创建一个dom作为下拉框吧。

技术方案

先写一个下拉框组件

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

复制代码
<template>
  <div class="select-wrap">
    <span>福利商城</span>
    <span>Saas平台</span>
    <span>活动定制</span>
  </div>
</template>

渲染组件

我们要将这个组件渲染在网页上,操作应该是这样的:

当鼠标移动到产品服务时,将下拉框组件作为一个组件实例渲染在页面的合适位置。

vue3中,渲染一个Vonde,核心逻辑如下:

js 复制代码
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信息。

js 复制代码
// App.vue
<div ref="select">
  <span class="name">产品服务</span> 
</div>
<script setup >
  import { ref } from "vue"
  const select = ref()
</script>

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

js 复制代码
// 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>

然后,添加下位置判断

js 复制代码
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渲染一个空对象即可

js 复制代码
render (vm, container)

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

js 复制代码
<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) 
}

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

相关推荐
Yeats_Liao4 分钟前
Go Web 编程快速入门 11 - WebSocket实时通信:实时消息推送和双向通信
前端·后端·websocket·golang
纯爱掌门人10 分钟前
鸿蒙状态管理V2实战:从零构建MVVM架构的应用
前端·harmonyos
丘耳15 分钟前
vis-network 知识点笔记
前端·javascript
有点笨的蛋15 分钟前
重新理解 Flexbox:让布局回归“弹性”的本质
前端·css
小着16 分钟前
微信小程序组件中二维码生成问题解决方案
前端·微信小程序
潜心编码22 分钟前
基于Django的医疗电子仪器系统
前端·数据库·1024程序员节
你说啥名字好呢24 分钟前
【React的Fiber及中断-重启逻辑的设计】
javascript·react.js
摘星编程27 分钟前
深入 Actix-web 源码:解密 Rust Web 框架的高性能内核
开发语言·前端·rust·actixweb
小白的码BUG之路27 分钟前
Vue3 -- 响应式 ref和 reactive
前端·javascript·vue.js
Onion34 分钟前
Vue2日历组件-仿企微日程日历
前端·javascript·vue.js