欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3遞歸組件封裝的全過程記錄

 更新時間:2021年09月26日 11:51:12   作者:慕斯不想說話  
組件是可以在自己的模板中調(diào)用自身的,不過他們只能通過name選項來做這件事,下面這篇文章主要給大家介紹了關(guān)于vue3遞歸組件封裝的相關(guān)資料,需要的朋友可以參考下

前言

今天在寫項目時,遇到一個自定義右鍵菜單的需求。在菜單中還有子菜單,所以這個時候就要用到遞歸組件了。所以寫下這篇文章來記錄一下自己編寫遞歸組件的過程。

1、遞歸組件

   遞歸組件,顧名思義就是在組件本身內(nèi)部調(diào)用自身。所以我們先構(gòu)建一個組件,并在自身內(nèi)部調(diào)用自身。常見的遞歸組件就是我們項目中經(jīng)常會用到的樹組件了。下面就是我自己實現(xiàn)的一個能夠滿足項目需求的遞歸組件的源碼。

<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"  />
           <!-- 判斷是否需要調(diào)用自身 -->
           <div v-if="item.children&&childrenMenuIndex===index"
            class="context-menu context-menu_children"
           >
            <!-- 在組件自身內(nèi)部調(diào)用自身 -->
            <list-comp :list-data='item.children' @hideContextMenu='hideContextMenuEvent' />
           </div>
       </li>
   </ul>
</template>
<script>
import { defineComponent, ref } from "vue";
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}){
    	//點擊事件
        const handleClick=(event,{text,callBack})=>{
            emit('hideContextMenu');
            //callBack是你自己傳進來的回調(diào)函數(shù),如果傳入了,則調(diào)用自定義回調(diào)函數(shù)
            if(callBack){
                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>

注意事項

  • 在遞歸組件本身內(nèi)部,調(diào)用自身時,需要將在遞歸組件上接收自己通過emit發(fā)出的自定義事件,接收后,在組件內(nèi)部再次通過emit觸發(fā)自定義事件。
  • 通過監(jiān)聽click事件,可以通過emit觸發(fā)自定義事件,在組件外部監(jiān)聽;也可以直接在通過 props傳遞數(shù)據(jù)到組件內(nèi)部時,就自己先構(gòu)建好回調(diào),這樣就可以不用通過emit觸發(fā)自定義事件了。
  • 在點擊遞歸組件中的菜單項時,需要讓遞歸組件銷毀。所有我們需要在 遞歸組件內(nèi)通過事件冒泡 監(jiān)聽click,contextmenu等事件來讓組件銷毀,然后通過emit觸發(fā)自定義事件,讓外界接收,從而達到銷毀組件的目的。
  • 在遞歸組件內(nèi)部調(diào)用click事件時,需要阻止事件冒泡以及默認事件。可以在click事件后面添加click.prevent.stop來阻止事件冒泡和默認事件。

2、右鍵菜單組件

  我項目中使用的是組件的形式來實現(xiàn)右鍵菜單菜單的。當然也可以通過插件的形式來實現(xiàn)。我這里的右鍵菜單本質(zhì)上就是對遞歸組件 的二次封裝,其實不用二次封裝也可以,可以直接使用遞歸組件作為右鍵菜單。

<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,
            default:()=>[]
        }
    },
    emits:['closeContextMenu'],
    setup(props,{emit}){
        const windowClickHandler=()=>{
            emit('closeContextMenu')
        };
        return {
            windowClickHandler,
        }
    }
})
</script>

注意事項

在項目中調(diào)用右鍵菜單時,需要先禁用掉window自身的右鍵菜單事件。然后實現(xiàn)自己的自定義菜單事件。實現(xiàn)代碼如下所示。

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

總結(jié)

到此這篇關(guān)于vue3遞歸組件封裝的文章就介紹到這了,更多相關(guān)vue3遞歸組件封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論