Bagaimana untuk melaksanakan kotak drop-down menu dalam vue3 melalui fungsi render

Penyelesaian Teknikal

Mula-mula tulis komponen kotak lungsur turun

Mula-mula, kami menulis komponen untuk memaparkan kandungan kotak lungsur turun. Nama komponen bermula dengan : Select.vue

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

Komponen rendering

Kami mahu memaparkan komponen ini pada halaman web, operasi sepatutnya Ini adalah seperti ini:

Apabila tetikus bergerak ke perkhidmatan produk, komponen kotak lungsur diturunkan sebagai contoh komponen pada kedudukan yang sesuai pada halaman.

Dalam vue3, Vonde dipaparkan Logik teras adalah seperti berikut:

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)

Untuk mengetahui lokasi pemaparan komponen, kita mesti mengetahui komponen induk (iaitu, lokasi dom bagi. perkhidmatan produk). Kami menggunakan ref untuk Mendapatkan maklumat dom komponen induk.

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

Apabila tetikus bergerak ke atas elemen perkhidmatan produk, kotak lungsur diturunkan Kami menambah fungsi

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

Kemudian, tambahkan pertimbangan kedudukan

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

di mana. prop dilalui Parameter jarak untuk komponen Pilih boleh ditetapkan dalam komponen.

Memusnahkan komponen

Untuk memusnahkan komponen, kita boleh menggunakan render untuk menjadikan objek kosong

render (vm, container)

Jika anda memerlukan komponen anak untuk memusnahkan dirinya, kita boleh menggunakan induk -pemindahan nilai anak

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

Dalam komponen induk, kita perlu menambah fungsi onDestroy dalam prop Nota: onDestroy ditulis dalam kotak unta

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

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kotak drop-down menu dalam vue3 melalui fungsi render. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!