作為從事前端開(kāi)發(fā)的你肯定見(jiàn)過(guò)不少的彈框組件，你可曾有想過(guò)要自己實(shí)現(xiàn)一個(gè)彈框組件庫(kù)，又或者想完全定制化的使用各種標(biāo)準(zhǔn)UI框架中的彈框組件呢？

今天這篇文章將會(huì)帶著你解析這一系列疑問(wèn)，以vant-weapp組件庫(kù)為例，從開(kāi)發(fā)標(biāo)準(zhǔn)的彈窗組件使用到高度定制復(fù)合自我審美的彈窗，再到完全研究清楚vant-weapp框架彈窗組件部分源碼。

一、vant-weapp彈窗組件介紹

vant-weapp組件庫(kù)是有贊團(tuán)隊(duì)開(kāi)發(fā)的 一款靈活簡(jiǎn)潔且美觀的小程序UI組件庫(kù) ，此文將以這個(gè)組件庫(kù)的用法為標(biāo)準(zhǔn)，下文提及的彈框組件均指的是此組件庫(kù)中的彈框。

彈框分類(lèi)

vant-weapp中彈框主要分為**兩大類(lèi)：彈出層Popup和對(duì)話框Dialog，**彈出層一般是帶有背景遮罩層和內(nèi)容展示區(qū)域用于在不跳轉(zhuǎn)頁(yè)面情況下進(jìn)行詳情的展示作用，對(duì)話框多數(shù)用于帶有詳情展示的同時(shí)還帶有希望用戶確認(rèn)等操作。如下圖所示，圖左為典型的Dialog，圖右為典型的Popup。

注冊(cè)小程序組件

在使用彈框組件之前記得在小程序的app.json文件中先注冊(cè)組件，詳細(xì)介紹見(jiàn) 快速上手 ，例如注冊(cè)van-popup組件代碼如下：

// app.json
"usingComponents": {
  "van-popup": "path/to/@vant/weapp/dist/popup/index"
}
復(fù)制代碼

在項(xiàng)目中實(shí)際使用如下：

在本文后續(xù)分析van-dialog源碼中會(huì)發(fā)現(xiàn)在dialog的index.json中也定義過(guò)van-popup組件，但是我們要直接實(shí)行van-popup組件必須在小程序的配置文件app.json中按照上圖方式進(jìn)行定義，微信小程序官網(wǎng)說(shuō)明過(guò) 自定義組件內(nèi)部的引入組件只在該組件內(nèi)生效

注冊(cè)完組件之后，就可以直接在小程序頁(yè)面中使用這里注冊(cè)的自定義組件，組件名稱為這里 key ，例如：。

二、Popup基本用法

常見(jiàn)用法

最常見(jiàn)的用法就是直接使用van-popup組件，通過(guò)組件的show屬性來(lái)控制其是否展示，組件內(nèi)部嵌套的其他組件或標(biāo)簽是popup組件的內(nèi)容，如下所示：

// wxml
<button bindtap="showPopup">展示彈出層</button>
<van-popup
	show="{{ show }}"
	position="top"
	bind:close="onClose"
  closeable
>內(nèi)容</van-popup>

// js
Page({
  data: {
    show: false
  },
  showPopup() {
    this.setData({ show: true });
  },
  onClose() {
    this.setData({ show: false });
  }
});
復(fù)制代碼

重點(diǎn)屬性分析

van-popup組件可以通過(guò)position屬性的五個(gè)值： center、top、right、bottom、left 來(lái)快捷的控制是從哪個(gè)位置彈出，例如：上例中的彈框從上往下彈出

可以通過(guò)round屬性來(lái)控制彈窗內(nèi)容是否顯示圓角，closeable可以決定是否顯示關(guān)閉彈框的圖標(biāo)按鈕，例如：上例中的彈窗將不顯示圓角，同時(shí)顯示關(guān)閉按鈕

各種基本的彈窗形式如下：

三、Dialog對(duì)話框基本用法

對(duì)話框則是在popup彈出層的基礎(chǔ)上添加了額外的內(nèi)置的標(biāo)題，快速確定按鈕等組件，用于消息提示、消息確認(rèn)等場(chǎng)景，下面看看其常見(jiàn)用法。

常規(guī)用法——帶標(biāo)題

最常規(guī)的用法就是直接使用van-dialog組件，通過(guò)組件的show屬性來(lái)控制其是否展示，組件內(nèi)部嵌套的其他組件或標(biāo)簽是dialog組件的內(nèi)容，如下所示：

// wxml
<van-dialog
  title="標(biāo)題"
	message="代碼是寫(xiě)出來(lái)給人看的，附帶能在機(jī)器上運(yùn)行"
  show="{{ show }}"
  confirm-button-open-type="getUserInfo"
  bind:close="onClose"
  bind:getuserinfo="getUserInfo"
>
  <image src="https://img.yzcdn.cn/1.jpg" />
</van-dialog>

// js
Page({
  data: {
    show: true
  },
  getUserInfo(event) {
    console.log(event.detail);
  },
  onClose() {
    this.setData({ close: false });
  }
});
復(fù)制代碼

常規(guī)用法——無(wú)標(biāo)題

直接使用van-dialog組件，通過(guò)組件的show屬性來(lái)控制其是否展示，組件內(nèi)部嵌套的其他組件或標(biāo)簽是dialog組件的內(nèi)容，不使用use-title-slot且不傳遞title屬性，如下所示：

// wxml
<van-dialog
  show="{{ show }}"
  confirm-button-open-type="getUserInfo"
  bind:close="onClose"
  bind:getuserinfo="getUserInfo"
>
  <view class="message">代碼是寫(xiě)出來(lái)給人看的，附帶能在機(jī)器上運(yùn)行</view>
</van-dialog>

// js
Page({
  data: {
    show: true
  },
  getUserInfo(event) {
    console.log(event.detail);
  },
  onClose() {
    this.setData({ close: false });
  }
});
復(fù)制代碼

上述兩種用法中的use-slot屬性表示使用默認(rèn)的slot（即van-dialog嵌套的wxml內(nèi)容，比如此處的 ...）來(lái)作為內(nèi)容輸出，bind:getuserinfo等是使用的微信開(kāi)發(fā)能力（即在點(diǎn)擊確定按鈕時(shí)候?qū)φ{(diào)用微信平臺(tái)API獲取到對(duì)應(yīng)的信息，此處是獲取用戶個(gè)人身份信息）

函數(shù)式調(diào)用——confirm

最常規(guī)的另一種用法就是直接使用 Dialog、Dialog.alert、Dialog.confirm 的方法快速打開(kāi)彈窗組件，關(guān)閉彈框組件則通過(guò) Dialog.close ，取消彈框的加載狀態(tài)則使用 Dialog.stopLoading，組件內(nèi)部嵌套的其他組件或標(biāo)簽是dialog組件的內(nèi)容，如下所示：

// wxml
<van-dialog id="van-dialog">
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';

// js
Dialog.alert({
  title: "標(biāo)題"
  message: '代碼是寫(xiě)出來(lái)給人看的，附帶能在機(jī)器上運(yùn)行'
}).then(() => {
  // on close
});

復(fù)制代碼

這里使用函數(shù)調(diào)用一定要注意在使用van-dialog的頁(yè)面的wxml中一定需要寫(xiě)這個(gè)來(lái)使用組件，下文在分析dialog的源碼中會(huì)講到（賣(mài)個(gè)關(guān)子），或者你可以先猜一猜:blush::blush:

上面三種van-dialog的常規(guī)使用方法的效果如下：

四、Dialog進(jìn)階用法

下面將會(huì)提供幾個(gè)作者在實(shí)戰(zhàn)中寫(xiě)出的Dialog對(duì)話框組件的實(shí)戰(zhàn)用法

使用use-title-slot定制標(biāo)題

<van-dialog
  id="van-dialog"
  show="{{ dialogShow }}"
  message="資質(zhì)原件拍照或掃描可以不加蓋公章，復(fù)印件需蓋章\n\n如是三證合一，則無(wú)需提供稅務(wù)登記證、組織機(jī)構(gòu)代碼證"
  message-align="left"
  confirm-button-text="知道了"
  confirm-button-color="#EE712F"
  use-title-slot
>
  <view slot="title" class=" merchant-dialog__title">
    <view class="merchant-dialog__title-text">**前，請(qǐng)準(zhǔn)備以下資料</view>
    <van-icon name="cross" size="40rpx" class="merchant-dialog__title-icon" bindtap="closeDialog" />
  </view>
</van-dialog>
// 樣式部分的代碼此處省略
復(fù)制代碼

觸發(fā)彈框顯示

handleButtonClick1: function () {
  this.setData({
  	dialogShow: true
  })
},
復(fù)制代碼

此例子如要使用了如下特性：

use-title-slot
confirm-button-text、confirm-button-color
van-icon

對(duì)應(yīng)的效果如下：

使用use-slot定制提示內(nèi)容

<van-dialog
  id="van-dialog-2"
  use-slot
  use-title-slot
>
  <view slot="title" style="padding-bottom: 10px;">
    <van-icon name="close" color="#fff" size="30" bindtap="closeDialog2" />
  </view>
  <image class="image" src="https://tva1.sinaimg.cn/large/0082zybply1gbylbcwm44j30rs13bdsg.jpg" mode="aspectFit"></image>
</van-dialog>
復(fù)制代碼

通過(guò)觸發(fā)彈框顯示

handleButtonClick2: function () {
  Dialog({
    selector: '#van-dialog-2',
    showConfirmButton: false,
    closeOnClickOverlay: false,
    className: 'dialog2',
    width: '260px'
  })
},
復(fù)制代碼

此例子如要使用了如下特性：

• 使用 use-slot 表示使用默認(rèn)的slot來(lái)內(nèi)容來(lái)渲染到彈框主體內(nèi)容位置
• 渲染的內(nèi)容為一張圖片，以此來(lái) 實(shí)現(xiàn)幕簾curtain效果
• 使用 className 這個(gè) externalClasses 來(lái)用頁(yè)面樣式控制組件內(nèi)部樣式

對(duì)應(yīng)效果如下：

使用css變量定義主題

<van-dialog
  id="van-dialog-3"
  use-title-slot
>
  <view slot="title" style="color: #000;">提示</view>
  <view>
    <view>為了給你推薦更合適的漫展～</view>
    <view>請(qǐng)開(kāi)啟定位權(quán)限～</view>
  </view>
</van-dialog>
復(fù)制代碼

通過(guò)觸發(fā)彈框顯示

handleButtonClick3: function () {
  Dialog({
    selector: '#van-dialog-3',
    showCancelButton: true,
    cancelButtonTrext: '取消',
    confirmButtonText: '去設(shè)置',
    cancelButtonColor: '#C46B85',
    confirmButtonColor: '#C46B85',
    message: '為了給你推薦更合適的漫展～\n請(qǐng)開(kāi)啟定位權(quán)限～',
    confirmButtonOpenType: 'openSetting',
    width: '260px',
    className: 'dialog3'
  })
},
復(fù)制代碼

外部樣式類(lèi)

.dialog-index--dialog3 {
  --dialog-background-color: rgba(255,255,255,0.8);
  --popup-background-color: rgba(255,255,255,0.8);
  --button-default-background-color: transparent;
  color: #666;
}
復(fù)制代碼

此例子如要使用了如下特性：

cancelButtonColor、confirmButtonColor
--dialog-background-color

對(duì)應(yīng)效果如下：

五、開(kāi)發(fā)實(shí)際場(chǎng)景中的彈窗組件

如果你仔細(xì)看過(guò)上面中的三種自定義方式的實(shí)現(xiàn)代碼應(yīng)該也可以根據(jù)UI需求實(shí)現(xiàn)自己的彈窗交互效果；這里我已經(jīng)基于前面提到的三種用法來(lái)開(kāi)發(fā)了幾個(gè)實(shí)際場(chǎng)景中的彈框組件：

• 實(shí)現(xiàn)幕簾curtain效果
• 實(shí)現(xiàn)操作權(quán)限提示
• 提示應(yīng)用升級(jí)
• 應(yīng)用使用提示

這部分的可以直接去看源碼 github.com/JohnieXu/va…

也可以掃碼這個(gè)小程序二維碼查看效果

六、源碼分析的前置條件

在看完上面幾種炫酷的彈框效果后，我們還是按照慣例研究下如此強(qiáng)大的彈框組件的源碼。在研究彈框部分源碼之前有必有分析一下一套完整UI框架所需要注意的框架級(jí)別的整體架構(gòu)

如何使用less工程化處理樣式

處理樣式是所有UI框架比不可忽略的核心邏輯之一，在vant-weapp中對(duì)樣式的處理主要分為以下三部分；源碼對(duì)應(yīng)結(jié)構(gòu)如下圖所示，使用less的mixins復(fù)用實(shí)現(xiàn)主題變量控制、公共樣式抽離等。

主題變量

在var.less文件定義了框架所用到的全部的樣式控制相關(guān)的變量，其中與彈框相關(guān)的部分源碼如下：

// Dialog
@dialog-width: 320px;
@dialog-small-screen-width: 90%;
@dialog-font-size: @font-size-lg;
@dialog-border-radius: 16px;
@dialog-background-color: @white;
@dialog-header-font-weight: @font-weight-bold;
@dialog-header-line-height: 24px;
@dialog-header-padding-top: @padding-lg;
@dialog-header-isolated-padding: @padding-lg 0;
@dialog-message-padding: @padding-lg;
@dialog-message-font-size: @font-size-md;
@dialog-message-line-height: 20px;
@dialog-message-max-height: 60vh;
@dialog-has-title-message-text-color: @gray-7;
@dialog-has-title-message-padding-top: @padding-sm;
復(fù)制代碼

源碼： var.less

此文件中的最終會(huì)轉(zhuǎn)換成 css變量 ，并非像antd、iview等網(wǎng)頁(yè)端框架中的樣式處理那樣編譯成變量指向的值。根據(jù)css變量作用域的特性，可以在自定義組件的外部樣式類(lèi)中局部覆蓋樣式變量來(lái)改變組件內(nèi)部的樣式。

通用樣式

像清除浮動(dòng)、文字省略、1像素邊框等通用的樣式類(lèi)的處理在mixin文件夾下

清除浮動(dòng)

.clearfix() {
  &::after {
    display: table;
    clear: both;
    content: '';
  }
}
復(fù)制代碼

使用常見(jiàn)的after偽類(lèi)來(lái)實(shí)現(xiàn)清除浮動(dòng)

文件省略

.multi-ellipsis(@lines) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: @lines;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}
.ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
復(fù)制代碼

使用less的函數(shù)封裝了兩個(gè)處理文字省略方法：?jiǎn)涡惺÷?、多行省?/p>

BEM命名

如何工程化的注冊(cè)自定義組件

微信小程序官方提供了 Component構(gòu)造方法 注冊(cè)自定義組件，為了結(jié)合typescript給自定義組件提供更靈活強(qiáng)大的組件注冊(cè)器對(duì)Component進(jìn)行了下面的功能封裝處理

封裝通用組件構(gòu)造方法

function VantComponent<Data, Props, Methods>(
  vantOptions: VantComponentOptions<
    Data,
    Props,
    Methods,
    CombinedComponentInstance<Data, Props, Methods>
  > = {}
): void {
  const options: any = {};
  mapKeys(vantOptions, options, {
    data: 'data',
    props: 'properties',
    mixins: 'behaviors',
    methods: 'methods',
    beforeCreate: 'created',
    created: 'attached',
    mounted: 'ready',
    relations: 'relations',
    destroyed: 'detached',
    classes: 'externalClasses'
  });
  const { relation } = vantOptions;
  if (relation) {
    makeRelation(options, vantOptions, relation);
  }
  // 給所有組件添加默認(rèn)外部樣式類(lèi)custom-class
  options.externalClasses = options.externalClasses || [];
  options.externalClasses.push('custom-class');
  // 給所有組件添加默認(rèn)behaviors
  options.behaviors = options.behaviors || [];
  options.behaviors.push(basic);
  // map field to form-field behavior
  if (vantOptions.field) {
    options.behaviors.push('wx://form-field');
  }
  // 默認(rèn)啟用多slot支持、組件中允許全局樣式修改
  options.options = {
    multipleSlots: true,
    addGlobalClass: true
  };
  // 最終使用官網(wǎng)構(gòu)造方法構(gòu)造組件
  Component(options);
}
復(fù)制代碼

源碼： component.ts

behaviors復(fù)用共享邏輯

behaviors 是微信小程序官方用于組件復(fù)用 data、methods 等屬性方法的一種方式，和vue中的 mixins 小作用一致，vant-weapp中定義的 mixins 如下圖所示:

其中basic是所有自定義組件都復(fù)用的一個(gè)mxin，給所有自定義的組件提供了三個(gè)方法： $emit、 set 和 getRect 。

• $emit 封裝了 triggerEvent 方法；
• set 封裝 setData 方法為Promise形式；
• getRect 采用Promise方法用查找對(duì)應(yīng)節(jié)點(diǎn)的boundingClientRect。

源碼如下：

// basic.ts
export const basic = Behavior({
  methods: {
    $emit(...args) {
      this.triggerEvent(...args);
    },
    set(data: object, callback: Function) {
      this.setData(data, callback);

      return new Promise(resolve => wx.nextTick(resolve));
    },
    getRect(selector: string, all: boolean) {
      return new Promise(resolve => {
        wx.createSelectorQuery()
          .in(this)[all ? 'selectAll' : 'select'](selector)
          .boundingClientRect(rect => {
            if (all && Array.isArray(rect) && rect.length) {
              resolve(rect);
            }

            if (!all && rect) {
              resolve(rect);
            }
          })
          .exec();
      });
    }
  }
});

復(fù)制代碼

源碼： basic.ts

生命周期命名

其實(shí)生命周期如何命名到不是很重要，vant-weapp對(duì)命名進(jìn)行了轉(zhuǎn)換主要基于以下兩個(gè)原因：

• 開(kāi)發(fā)效率 ：vant-weapp源自適用于vue的UI組件庫(kù)—— vant ，命名統(tǒng)一轉(zhuǎn)換便于現(xiàn)有框架的邏輯復(fù)用
• 使用成本 ：生命周期命名向主流MVVM框架靠近減輕使用者的學(xué)習(xí)成本、框架維護(hù)成本

function mapKeys(source: object, target: object, map: object) {
  Object.keys(map).forEach(key => {
    if (source[key]) {
      target[map[key]] = source[key];
    }
  });
}
mapKeys(vantOptions, options, {
  data: 'data',
  props: 'properties',
  mixins: 'behaviors',
  methods: 'methods',
  beforeCreate: 'created',
  created: 'attached',
  mounted: 'ready',
  relations: 'relations',
  destroyed: 'detached',
  classes: 'externalClasses'
});
復(fù)制代碼

源碼： component.ts#L24

通過(guò) mapKeys 方法對(duì) VantComponent 中傳入的生命周期函數(shù)進(jìn)行了轉(zhuǎn)換，轉(zhuǎn)換名生命周期名稱與微信小程序一致

自定義組件的樣式隔離

微信小程序自定義組件默認(rèn)樣式作用域的范圍是為當(dāng)前組件，也就是說(shuō)組件文件夾下的wxss中的樣式只對(duì)該文件夾下的wxml生效（除去標(biāo)簽名、ID選擇器）

這種以組件為單位進(jìn)行樣式隔離的模式類(lèi)似于React框架中處理的組件樣式的庫(kù) styled-components

組件間樣式共享

要在組件之前共享樣式或者讓自定義組件接受外部樣式，可行方案有如下幾種：

| styleIsolation屬性配置 |

• page-isolated 表示在這個(gè)頁(yè)面禁用 app.wxss ，同時(shí)，頁(yè)面的 wxss 不會(huì)影響到其他自定義組件；
• page-apply-shared 表示在這個(gè)頁(yè)面禁用 app.wxss ，同時(shí)，頁(yè)面 wxss 樣式不會(huì)影響到其他自定義組件，但設(shè)為 shared 的自定義組件會(huì)影響到頁(yè)面；
• page-shared 表示在這個(gè)頁(yè)面禁用 app.wxss ，同時(shí)，頁(yè)面 wxss 樣式會(huì)影響到其他設(shè)為 apply-shared 或 shared 的自定義組件，也會(huì)受到設(shè)為 shared 的自定義組件的影響。 | styleIsolation 選項(xiàng)從基礎(chǔ)庫(kù)版本 2.6.5 開(kāi)始支持 | | --- | --- | --- | | addGlobalClass屬性配置 | 表示頁(yè)面 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會(huì)影響頁(yè)面 |
• 小程序基礎(chǔ)庫(kù)版本 2.2.3 以上支持
• 等價(jià)于styleIsolation: apply-shared
• vant-weapp中使用的是此方案 ： addGlobalClass: 'true' ，默認(rèn)的 styleIsolation: 'shared' 不生效 | | externalClasses外部樣式類(lèi) | 組件的使用者可以指定這個(gè)樣式類(lèi)對(duì)應(yīng)的外部樣式名 ，對(duì)應(yīng)樣式名的樣式在組件內(nèi)部生效 |
• 基礎(chǔ)庫(kù) 1.9.90 開(kāi)始支持
• vant-weapp中也支持此方式
• 推薦使用此方式來(lái)自定義vant-weapp的樣式 | | class="~blue-text"引用父組件樣式 | 即使啟用了樣式隔離 isolated ，組件仍然可以在局部引用組件所在頁(yè)面的樣式或父組件的樣式 | 基礎(chǔ)庫(kù) 2.9.2 開(kāi)始支持 |

使用總結(jié)

使用vant-weapp組件庫(kù)的使用者最佳的自定義組件樣式的方式是： 采用外部樣式類(lèi)+CSS變量，在無(wú)相關(guān)CSS變量時(shí)才用自己的樣式+ !important  確保樣式優(yōu)先級(jí) ，在自定義組件中使用vant-weapp的組件時(shí)候的注意事項(xiàng)參照 樣式覆蓋 。

自定義組件通信方案

自定義組件通信主要包括 組件參數(shù)傳遞 和 事件監(jiān)聽(tīng) ，這兩個(gè)功能都是微信小程序官網(wǎng)提供的；參數(shù)傳遞是由父?jìng)鞯阶拥膯蜗騻鬟f，而事件監(jiān)聽(tīng)則是相應(yīng)原生事件或者自定義事件。自定義事件用于對(duì)組件的事件進(jìn)行封裝，自定義事件機(jī)制如下：

這里在van-dialog組件使用位置監(jiān)聽(tīng)bindclick事件，最終這個(gè)事件會(huì)在van-dialog組件內(nèi)部的button的tap時(shí)被觸發(fā)，后面源碼分析中的自定義組件的自定義事件全部采用的此種模式。

七、Popup彈出層組件源碼分析

組件部分源碼結(jié)構(gòu)

popup組件部分源碼結(jié)構(gòu)如下：

組件的命名規(guī)范與微信小程序自定義組件的規(guī)范相符合（README.md為組件的使用說(shuō)明文檔，用于生成官網(wǎng)的組件文檔說(shuō)明）。

popup組件的配置文件標(biāo)識(shí)當(dāng)前的index為組件，通過(guò) using-components 引入了 van-icon 和 van-overlay 組件，在對(duì)應(yīng)的wxml中可以直接使用。

組件主要邏輯

彈出層組件主要分類(lèi) 遮蓋層 和 內(nèi)容層 ，內(nèi)容層嵌套在遮蓋層內(nèi)部來(lái)確保視覺(jué)上覆蓋在遮蓋層之上。

遮蓋層及事件

遮蓋層通過(guò)overlay、overlayStyle等組件屬性來(lái)控制其是否顯示以及遮蓋層的樣式等，遮蓋的事件有 onClickOverlay ，通過(guò)$emit觸發(fā)組件的自定義事件close。

onClickOverlay() {
  this.$emit('click-overlay');

  if (this.data.closeOnClickOverlay) {
    this.$emit('close');
  }
}
復(fù)制代碼

關(guān)閉按鈕及事件

通過(guò)closable屬性決定是否顯示默認(rèn)的關(guān)閉按鈕，也可以通過(guò)關(guān)閉圖標(biāo)相關(guān)屬性配置更改按鈕樣式，關(guān)閉按鈕的事件有onClickCloseIcon，通過(guò)$emit觸發(fā)組件的自定義事件close。

onClickCloseIcon() {
  this.$emit('close');
},
復(fù)制代碼

內(nèi)容分發(fā)

接受一個(gè)默認(rèn)的slot，其位置根據(jù)傳入的 position 參數(shù)不同有 top、right、bottom、left、center 五種，根據(jù)這五種位置參數(shù)有對(duì)應(yīng)的五種不同的彈出位置和動(dòng)畫(huà)

過(guò)渡動(dòng)畫(huà)

使用transform來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，根據(jù) position 參數(shù)的五種情況有五種默認(rèn)動(dòng)畫(huà)

// popup/index.less
.van-bottom-enter,
.van-bottom-leave-to {
  transform: translate3d(0, 100%, 0);
}
.van-top-enter,
.van-top-leave-to {
  transform: translate3d(0, -100%, 0);
}
.van-left-enter,
.van-left-leave-to {
  transform: translate3d(-100%, -50%, 0);
}
.van-right-enter,
.van-right-leave-to {
  transform: translate3d(100%, -50%, 0);
}
復(fù)制代碼

同時(shí)暴露了外部樣式類(lèi)可以用來(lái)自定義動(dòng)畫(huà)，這里動(dòng)畫(huà)階段劃分和vue相同，分類(lèi)： enter、enter-active、enter-to、leave、leave-active、leave-to

// popup/index.ts
VantComponent({
  classes: [
    'enter-class',
    'enter-active-class',
    'enter-to-class',
    'leave-class',
    'leave-active-class',
    'leave-to-class'
  ],
  ...
}
復(fù)制代碼

八、Dialog對(duì)話框組件源碼分析

組件部分源碼結(jié)構(gòu)

dialog組件部分源碼結(jié)構(gòu)如下：

結(jié)構(gòu)同popup組件，不同點(diǎn)在于index.json使用了 van-popup、van-button 組件，以及多了dialog.ts這個(gè)暴露API函數(shù)調(diào)用方法的文件。

組件布局結(jié)構(gòu)

dialog組件整體基于popup組件，在其默認(rèn)slot中添加了頂部標(biāo)題的slot和按鈕組元素，大致結(jié)構(gòu)如下

源碼結(jié)構(gòu)：

// dialog/index.wxml
<van-popup
  show="{{ show }}"
  ...
>
  <view
    wx:if="{{ title || useTitleSlot  }}"
    class="van-dialog__header {{ message || useSlot ? '' : 'van-dialog--isolated' }}"
  >
    <slot wx:if="{{ useTitleSlot }}" name="title" />
    <block wx:elif="{{ title }}"> {{ title }}</block>
  </view>

  <slot wx:if="{{ useSlot }}" />
  <view
    wx:elif="{{ message }}"
    class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }} {{ messageAlign ? 'van-dialog__message--' + messageAlign : '' }}"
  >
    <text class="van-dialog__message-text">{{ message }}</text>
  </view>

  <view class="van-hairline--top van-dialog__footer">
    <van-button
      wx:if="{{ showCancelButton }}"
      ...
    >
      {{ cancelButtonText }}
    </van-button>
    <van-button
      wx:if="{{ showConfirmButton }}"
      ...
    >
      {{ confirmButtonText }}
    </van-button>
  </view>
</van-popup>
復(fù)制代碼

函數(shù)式調(diào)用實(shí)現(xiàn)

在前面中通過(guò)Dialog函數(shù)調(diào)用來(lái)打開(kāi)彈出框組件，實(shí)現(xiàn)函數(shù)式調(diào)用的核心思路主要是： 通過(guò)selectComponent(selector)方法查找（類(lèi)似于查找DOM、Vue中查找組件實(shí)例）對(duì)頁(yè)面中定義渲染好的dialog組件，手動(dòng)更新其組件實(shí)例的數(shù)據(jù)。 ** Dialog方法定義如下：

const Dialog: Dialog = options => {
  options = {
    ...Dialog.currentOptions,
    ...options
  };
  return new Promise((resolve, reject) => {
    const context = options.context || getContext();
    const dialog = context.selectComponent(options.selector);
    delete options.context;
    delete options.selector;
    if (dialog) {
      dialog.setData({
        onCancel: reject,
        onConfirm: resolve,
        ...options
      });
      queue.push(dialog);
    } else {
      console.warn('未找到 van-dialog 節(jié)點(diǎn)，請(qǐng)確認(rèn) selector 及 context 是否正確');
    }
  });
};
復(fù)制代碼

**

函數(shù)式調(diào)用時(shí)候根據(jù)傳入的options配置去更新找到的組件實(shí)例上的屬性

由微信小程序自定義組件限制不能更新slot，slot需要用組件嵌套來(lái)傳入

函數(shù)式調(diào)用中的options會(huì)有默認(rèn)值強(qiáng)制覆蓋掉van-dialog組件屬性處傳入的非id等其他屬性，即函數(shù)調(diào)用的時(shí)通過(guò)組件傳入的屬性無(wú)效

**

Dialog.confirm

確認(rèn)彈窗

調(diào)用方法

Dialog.confirm({
	selector: '#van-dialog',
	title: '提示',
	message: '這里放置提示內(nèi)容'
})
復(fù)制代碼

實(shí)現(xiàn)方式

Dialog.confirm = options =>
  Dialog({
    showCancelButton: true,
    ...options
  });
復(fù)制代碼

調(diào)用Dialog時(shí)候默認(rèn)執(zhí)行定了顯示取消按鈕，其他無(wú)區(qū)別

Dialog.close

關(guān)閉彈窗

調(diào)用方法

Dialog.close()
復(fù)制代碼

實(shí)現(xiàn)方式

Dialog.close = () => {
  queue.forEach(dialog => {
    dialog.close();
  });
  queue = [];
};
復(fù)制代碼

遍歷內(nèi)部緩存的所有調(diào)用Dialog方法找到的van-dialog組件實(shí)例，執(zhí)行其close方法

Dialog.setDefaultOptions

更改對(duì)話框默認(rèn)配置

調(diào)用方法

Dialog.setDefaultOptions(options)
復(fù)制代碼

實(shí)現(xiàn)方式

Object.assign(Dialog.currentOptions, options);
復(fù)制代碼

通過(guò)Object.assign將傳入的默認(rèn)配置合并到內(nèi)部Dialog.currentOptions配置上

Dialog.resetDefaultOptions

恢復(fù)對(duì)話框默認(rèn)配置

調(diào)用方法

Dialog.resetDefaultOptions()
復(fù)制代碼

實(shí)現(xiàn)方式

Dialog.resetDefaultOptions = () => {
  Dialog.currentOptions = { ...Dialog.defaultOptions };
};
復(fù)制代碼

恢復(fù)Dialog.currentOptions配置為Dialog.defaultOptions

總結(jié)

本文講解了vant-weapp組件庫(kù)中的彈框組件的基本用法、進(jìn)階用法、定制主題、自定義內(nèi)容等用法，同時(shí)還更進(jìn)一步的研究了vant-weapp組件中的popup組件、dialog組件的實(shí)現(xiàn)。也只有徹底弄懂了UI框架的封裝思路我們才能更進(jìn)一步的修改框架來(lái)定制化更復(fù)雜更貼合項(xiàng)目要求的各種組件，本文按照 由實(shí)用到進(jìn)階再到研究源碼 的思路為各位研究框架源碼提供另一種方法。

下一步將會(huì)在vant-weapp彈框組件之上封裝一系列實(shí)戰(zhàn)的案例，期待你的關(guān)注與收藏。