背景

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

• 圖一

• 圖二

完成開發(fā)后，準(zhǔn)備集成到項(xiàng)目中時(shí)忽然發(fā)現(xiàn)無(wú)法集成到公司內(nèi)部的組件庫(kù)中，因?yàn)楣镜慕M件庫(kù)表格的操作項(xiàng)按鈕是通過傳參的方式進(jìn)行配置，無(wú)法直接使用popConfirm包裹操作按鈕的方式進(jìn)行Dom的書寫。

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

 <HConfirmModal  
     title="測(cè)試標(biāo)題" 
     modalType="TextConfirm" 
     paperWork="hello-word" 
     :width="300" 
     v-model:visible="visible">
 </HConfirmModal>

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

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

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

開發(fā)前想法

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

• 圖一

• 圖二

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

那么，如何獲取這個(gè)事件呢？

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

也許可以，但是這樣操作起來似乎有點(diǎn)舍近求遠(yuǎn)，畢竟除了表單校驗(yàn)的邏輯還有一個(gè)倒計(jì)時(shí)的羅需要進(jìn)行判斷，寫起來似乎有些麻煩。

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

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

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

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

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

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

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

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

核心方法

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

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

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

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

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

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

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

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

getCurrentInstance可以獲取到當(dāng)前組件的實(shí)例，既然可以獲取到當(dāng)前的實(shí)例，那么比必然可以操作實(shí)例上的方法。

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

這個(gè)觸發(fā)的代碼也很簡(jiǎn)單：

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

最后，我們?cè)趆ooks函數(shù)中可以獲取組件的實(shí)例，拿到組件實(shí)例對(duì)象后，我們就可以為所欲為了。

最后

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

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

最新評(píng)論