vue3遞迴元件封裝的全過程記錄

阿新 • • 發佈：2021-09-27

前言

今天在寫專案時，遇到一個自定義右鍵選單的需求。在選單中還有子選單，所以這個時候就要用到遞迴元件了。所以寫下這篇文章來記錄一下自己編寫遞迴元件的過程。

1、遞迴元件

遞迴元件，顧名思義就是在元件本身內部呼叫自身。所以我們先構建一個元件，並在自身內部呼叫自身。常見的遞迴元件就是我們專案中經常會用到的樹元件了。下面就是我自己實現的一個能夠滿足專案需求的遞迴元件的原始碼。

<template>
   <ul class="list-container">
       <li v-for="(item,index) in listData" 
            :key="index" class="list-item" 
            @click.prevent.stop="handleClick($event,item)"
            @mouseover="childrenMenuIndex=index"
            >
           <span class="list-item_span">
               {{item.text}}
           </span>
           <CaretRightOutlined v-if="item.children"  />
           <!-- 判斷是否需要呼叫自身 -->
           <div v-if="item.children&&childrenMenuIndex===index"
            class="context-menu context-menu_children"
           >
            <!-- 在元件自身內部呼叫自身 -->
            <list-comp :list-data='item.children' @hideContextMenu='hideContextMenuEvent' />
           </div>
       </li>
   </ul>
</template>

<script>
import { defineComponent,ref } from "";
import {CaretRightOutlined} from '@ant-design/icons-vue';
export default defineComponent({
    name:'list-comp',props:{
        listData:{
            type:Array,default:()=>[]
        }
    },components:{
        CaretRightOutlined
    },emits:[
        "hideContextMenu"
    ],setup(props,{emit}){
    	//點選事件
    http://www.cppcns.com 
    constmyPWRh handleClick=(event,{text,callBack})=>{
            emit('hideContextMenu');
            //callBack是你自己傳進來的回撥函式，如果傳入了，則呼叫自定義回撥函式
            if(callBack){
        www.cppcns.com        callBack();
                return;
            }
        }
        const hideContextMenuEvent=()=>{
            emit('hideContextMenu');    
        }
        //用於標識當前選中的選單項
        const childrenMenuIndex=ref(-1);
        const eventNames=['click','contextmenu'];
        onMounted(()=>{ 
            eventNames.forEach(eventName=>window.addEventListener(eventName,hideContextMenuEvent))
        })
        onBeforeUnmount(()=>{
            eventNames.forEach(eventName=>window.removeEventListener(eventName,hideContextMenuEvent))
        })
        return {
            handleClick,childrenMenuIndex,hideContextMenuEvent
        }
    }
})
</script>

注意事項

在遞迴元件本身內部，呼叫自身時，需要將在遞迴元件上接收自己通過emit發出的自定義事件，接收後，在元件內部再次通過emit觸發自定義事件。
通過監聽click事件,可以通過emit觸發自定義事件，在元件外部監聽；也可以直接在通過 props傳遞資料到元件內部時，就自己先構建好回撥，這樣就可以不用通過emit觸發自定義事件了。
在點選遞迴元件中的選單項時，需要讓遞迴元件銷燬。所有我們需要在遞迴元件內通過事件冒泡監聽click,contextmenu等事件來讓元件銷燬，然後通過emit觸發自定義事件，讓外界接收，從而達到銷燬元件的目的。
在遞迴元件內部呼叫click事件時，需要阻止事件冒泡以及預設事件。可以在click事件後面新增click.prevent.stop來阻止事件冒泡和預設事件。

2、右鍵選單元件

我專案中使用的是元件的形式來實現右鍵選單選單的。當然也可以通過外掛的形式來實現。我這裡的右鍵選單本質上就是對遞迴元件的二次封裝，其實不用二次封裝也可以，可以直接使用遞迴元件作為右鍵選單。

<template>
    <teleport to='body' >
        <div class="content-menu_container" :style="styleObj">
            <list-comp 
                :list-data='menuData'
                @hideContextMenu='windowClickHandler'
             />
        </div>
    </teleport>
</template>

<script>
import { defineComponent } from "vue";
import ListComp from "./list-comp.vue"
export default defineComponent({
    name:"contextMenu",components:{
        ListComp
    },props:{
        styleObj:{
            type:Object,default:()=>{}
        },menuData:{
            type:Array,emits:['closeContextMenu'],{emit}){
        const windowClickHandler=()=>{
            emit('closeCowww.cppcns.comntextMenu')
        };
        return {
            windowClickHandler,}
    }
})
</script>

注意事項

在專案中呼叫右鍵選單時，需要先禁用掉window自身的右鍵選單事件。然後實現自己的自定義選單事件。實現程式碼如下所示。

const showContextMenu=(event)=>{
    //禁用預設事件和阻止冒泡
    event.stopPropagation();
    event.preventDefault();
    state.showContextMenu=true;
    state.styleObj={
      left:event.clientX+ "px",top:event.clientY+'px'
    }
  }
  //監聽window自身的右鍵選單事件
  onMounted(()=>{
    window.addEventListener('contextmenu',showContextMenu)
  })
  onBeforeUnmount(()=>{
    window.removeEventListener('contextmenu',showContextMenu)
  })