背景

上次開發(fā)了一個類似popConfirm的二次確認彈框，如下面兩個圖：

• 圖一

• 圖二

完成開發(fā)后，準備集成到項目中時忽然發(fā)現(xiàn)無法集成到公司內(nèi)部的組件庫中，因為公司的組件庫表格的操作項按鈕是通過傳參的方式進行配置，無法直接使用popConfirm包裹操作按鈕的方式進行Dom的書寫。

所以又對二次彈框進行了一次簡單的開發(fā)，采用modal的方式進行開發(fā)。好處是除了可以以之前的方式，直接在組件上傳入props使用，如：

 <HConfirmModal  
     title="測試標題" 
     modalType="TextConfirm" 
     paperWork="hello-word" 
     :width="300" 
     v-model:visible="visible">
 </HConfirmModal>

也可以采用注冊的方式，注冊組件后，調(diào)用組件的api進行使用，如：

 <HConfirmModal  @register="register" @ok="testOK" ></HConfirmModal>
 const [register, { openConfirmModal: openModifyModal,setConfirmModalProps}] = useConfirmModal()
  function handleShow() {
    setConfirmModalProps({
      title:'測試標題',
      modalType:'TimeConfirm',
      desc:'注意危險'
    })
    openModifyModal(true)
  }

這樣就可以比較方便的集成到現(xiàn)有的組件庫中，也不需要改動現(xiàn)有組件庫中的table相關(guān)的代碼，相對來說效果也稍微好一些。

開發(fā)前想法

最早的實操方案打算借助于antd中的modal組件，對modal組件重新進行封裝，但是發(fā)現(xiàn)：當我在modal組件中寫入相應(yīng)的dom結(jié)構(gòu)后，如圖：

• 圖一

• 圖二

modal組件中寫入表單相關(guān)的dom后，需要我點擊確認按鈕時，對表單進行校驗，這時候就需要能夠直接獲取Modal組件中的click事件。

那么，如何獲取這個事件呢？

最開始的時候，也沒想到很好的方法，后來想是否可以用ref來獲取Modal的實例，然后調(diào)用這個實例上注冊的事件呢？

也許可以，但是這樣操作起來似乎有點舍近求遠，畢竟除了表單校驗的邏輯還有一個倒計時的羅需要進行判斷，寫起來似乎有些麻煩。

所以最終還是覺得借鑒Modal的樣式，重新開發(fā)一個比較好，寫起來比較舒服，效率也會高一點。

兩種調(diào)用方式的實現(xiàn)思路

第一，使用props進行控制。這種組件實現(xiàn)起來比較簡單，定義好組件需要的屬性作為props，傳遞給組件，組件按照不同的屬性進行渲染，點擊時觸發(fā)不同的emit事件即可。

其流程為：props和emit事件 ---> 渲染組件 ---> 觸發(fā)emit事件。

這種方式實現(xiàn)起來比較簡單，但是場景稍微有些局限，如：組件的行為，如顯示、隱藏必須在外部定義，需要外部書寫相應(yīng)的函數(shù)進行控制。

第二種方式，定義組件內(nèi)部的方法，組件的行為通過組件本身的方法進行控制，同時將組件自身的方式通過hooks的方式暴露給外部。

其流程為：props和emit事件 ---> 組件定義自身需要的函數(shù)，同時將傳入的props屬性轉(zhuǎn)化為內(nèi)部屬性---> 組件的行為根據(jù)自身的屬性和方法進行控制---> 將組件本身的方法以hooks的形式暴露出來。

這樣一來，組件即可以以傳統(tǒng)props的方式使用，也可以通過hooks的注冊方法及組件本身的其他方法進行控制，使用的場景相對來說更廣泛一些。

核心方法

傳統(tǒng)的組件開發(fā)方式這里就不做過多的解釋了，主要講一下第二種方式的實現(xiàn)方式。

使用第二種方式開發(fā)組件的關(guān)鍵點有兩處：

第一， 如何將外部傳入的props轉(zhuǎn)化為組件內(nèi)部的屬性 ？

第二，如何才能夠獲取到組件自身所定義的方法 ？

將外部傳入的props轉(zhuǎn)為組件內(nèi)部屬性其實很簡單，我們只需要使用computed方式將轉(zhuǎn)化一下即可，如：

  const getMergeProps = computed((): Recordable => {
      return {
        ...props,
        ...(unref(propsRef) as any)
      }
    })

這樣我們就可以使用組件內(nèi)部的屬性getMergeProps對組件的dom進行渲染，實現(xiàn)不同的屬性展示不同的內(nèi)容。

那么，如何才能獲取組件內(nèi)部的方法呢？其實也很簡單，這里需要用到一個vue提供的一個方法：getCurrentInstance。

getCurrentInstance可以獲取到當前組件的實例，既然可以獲取到當前的實例，那么比必然可以操作實例上的方法。

然后，我們在組件實例化的時候觸發(fā)一個注冊函數(shù)register,將組件內(nèi)部需要對外暴露的方法傳給register方法，然后在對應(yīng)的hooks中可以擴展實例的方法，這樣我們就可以實現(xiàn)使用hooks的方式，注冊、然后控制組件的各種行為。

這個觸發(fā)的代碼也很簡單：

 const instance = getCurrentInstance()
    if (instance) {
      emit('register', modalMethods, instance.uid)
    }

最后，我們在hooks函數(shù)中可以獲取組件的實例，拿到組件實例對象后，我們就可以為所欲為了。

最后

文章貼的代碼較少，主要是覺得技術(shù)上還是需要以理解實現(xiàn)思路為主，有了思路我們就可以寫各式各樣的代碼去實現(xiàn)功能，單純的貼代碼似乎沒什么太大的意義。

以上就是vue3結(jié)合hooks開發(fā)可以注冊的二次確認彈框的詳細內(nèi)容，更多關(guān)于vue3 hooks注冊確認彈框的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論