レンダー関数を使用してvue3にメニュードロップダウンボックスを実装する方法-Vue.js-php.cn

レンダー関数を使用してvue3にメニュードロップダウンボックスを実装する方法

PHPz

リリース： 2023-05-10 16:28:21

転載

1740 人が閲覧しました

技術的解決策

最初にドロップダウンボックスコンポーネントを作成します

まず、ドロップダウンボックスの内容を表示するコンポーネントを作成します。コンポーネント名は で始まります: Select.vue

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

ログイン後にコピー

レンダー関数を使用してvue3にメニュードロップダウンボックスを実装する方法

コンポーネントのレンダリング

このコンポーネントを Web ページ上にレンダリングしたいと考えています。操作は次のようになります。

マウスが製品サービスに移動すると、ドロップダウンボックスコンポーネントがページ上の適切な位置にコンポーネントインスタンスとしてレンダリングされます。

vue3 では、Vonde をレンダリングするコアロジックは次のとおりです。

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)

ログイン後にコピー

コンポーネントのレンダリングの場所を知るには、親コンポーネント (つまり、コンポーネントの dom の場所) を知る必要があります。製品サービス)、ref を使用して親コンポーネントの dom 情報を取得します。

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

ログイン後にコピー

マウスを製品サービス要素の上に移動すると、ドロップダウンボックスが表示されます。関数

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

ログイン後にコピー

を追加します。次に、位置判定

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

ログイン後にコピー

を追加します。これらには、prop が渡されます。Select コンポーネントの距離パラメータはコンポーネント内で設定できます。

コンポーネントを破棄する

コンポーネントを破棄するには、render を使用して空のオブジェクトをレンダリングできます

render (vm, container)

ログイン後にコピー

子コンポーネント自体を破棄する必要がある場合は、親を使用できます-child 値の受け渡し

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

ログイン後にコピー

親コンポーネントでは、props に onDestroy 関数を追加する必要があります。注意: onDestroy はキャメルケースで書かれています

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

ログイン後にコピー

以上がレンダー関数を使用してvue3にメニュードロップダウンボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。