Comment implémenter la liste déroulante du menu dans vue3 via la fonction de rendu

Solution technique

Écrivez d'abord un composant de liste déroulante

Tout d'abord, nous écrivons d'abord un composant pour afficher le contenu de la boîte déroulante. Le nom du composant commence par  : Select.vue

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

Composant de rendu

Nous voulons rendre ce composant sur la page Web. L'opération devrait être comme ceci :

Lorsque la souris se déplace sur le service produit, déplacez le composant de la liste déroulante Rendu en tant qu'instance de composant à l'emplacement approprié sur la page.

Dans vue3, lors du rendu d'un Vonde, la logique de base est la suivante :

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)

Pour connaître l'emplacement du rendu du composant, nous devons connaître le composant parent (c'est-à-dire l'emplacement dom du service produit). pour obtenir les informations dom du composant parent.

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

Lorsque la souris passe sur l'élément produit service, la liste déroulante est rendue. Nous ajoutons une fonction

// 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(&#39;div&#39;);
  //2、创造虚拟节点
  let vm = createVNode(Select)
  //3、将虚拟节点创造成真实DOM
  render (vm, container)
  //4、将渲染的结果放到body下
  document.body.appendChild(container.firstElementChild) 
}
</script>

Ensuite, ajoutons le jugement de position

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) 
}

Parmi eux, prop est le paramètre de distance transmis au composant Select. , qui est défini dans le composant Can.

Détruisez le composant

Pour détruire le composant, nous pouvons utiliser le rendu pour restituer un objet vide

render (vm, container)

Si nous avons besoin que le composant enfant se détruise, nous pouvons utiliser le transfert de valeur parent-enfant

<template>
  <div class="select-wrap" @mouseleave="beforeUnload">
    <span>福利商城</span>
    <span>Saas平台</span>
    <span>活动定制</span>
  </div>
</template>
<script   setup>
const emit = defineEmits([&#39;destroy&#39;])
function beforeUnload(){
 emit(&#39;destroy&#39;)
}
</script>

Dans le composant parent, nous devons ajouter une fonction props onDestroy, remarque : onDestroy est écrit en chameau

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) 
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!