So implementieren Sie das Menü-Dropdown-Feld in vue3 über die Renderfunktion-View.js-php.cn

So implementieren Sie das Menü-Dropdown-Feld in vue3 über die Renderfunktion

PHPz

Freigeben： 2023-05-10 16:28:21

nach vorne

1739 Leute haben es durchsucht

Technische Lösung

Schreiben Sie zunächst eine Dropdown-Box-Komponente

Zuerst schreiben wir zunächst eine Komponente, um den Inhalt der Dropdown-Box anzuzeigen. Der Komponentenname beginnt mit: Select.vue Verschieben Sie die als Komponenteninstanz gerenderte Dropdown-Box-Komponente an die entsprechende Stelle auf der Seite. In vue3 lautet die Kernlogik beim Rendern eines Vonde wie folgt:

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

Nach dem Login kopieren

Um den Speicherort des Komponenten-Renderings zu kennen, müssen wir die übergeordnete Komponente kennen (dh den Dom-Speicherort des Produktservices). um die Dom-Informationen der übergeordneten Komponente zu erhalten. So implementieren Sie das Menü-Dropdown-Feld in vue3 über die Renderfunktion

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)

Nach dem Login kopieren

Wenn sich die Maus über das Produkt-Service-Element bewegt, wird das Dropdown-Feld gerendert.

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

Nach dem Login kopieren

Dann fügen wir die Positionsbeurteilung hinzu.

// 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>

Nach dem Login kopieren

Unter diesen ist prop der an die Select-Komponente übergebene Abstandsparameter , die in der Komponente Can eingestellt wird.

Zerstören Sie die Komponente.

Um die Komponente zu zerstören, können wir render verwenden, um ein leeres Objekt zu rendern. Wir müssen eine props-onDestroy-Funktion hinzufügen. Hinweis: onDestroy ist in Kamel-Schreibweise geschrieben

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Menü-Dropdown-Feld in vue3 über die Renderfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!