Comment implémenter la liste déroulante du menu dans vue3 via la fonction de rendu-Voir.js-php.cn

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

PHPz

Libérer： 2023-05-10 16:28:21

avant

1739 Les gens l'ont consulté

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>

Copier après la connexion

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

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 &#39;vue&#39;
import component from "./component.vue"
//1、创造包裹虚拟节点的div元素
const container = document.createElement(&#39;div&#39;);
//2、创造虚拟节点
vm = createVNode(component)
//3、将虚拟节点创造成真实DOM
render (vm, container)
//4、将渲染的结果放到body下
document.body.appendChild(container.firstElementChild)

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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)

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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!