Axure有時會在一個原型圖中復用組件，比如彈出對話框、頁面頭部導航條、左側導航樹等。如果采用簡單的方式，那么可以在每個頁面里都拷貝一份，但當修改了組件的某個地方后則需要檢查并修改很多頁面，其工作量可想而知。

為了解決這個問題，Axure提供母版功能。你可以將頁面中公共的部分提取出來定義為母版，然后在需要的頁面里添加該母版。此時如果要修改，則直接修改母版文件，所有引用該母版的頁面會自動更新修改的內容。

為母版元素自定義事件的大致步驟為：

定義母版元素–>自定義事件–>添加用例

下文以彈出對話框為例說明母版的使用方法。本文僅適用于具有一定Axure使用經驗的用戶閱讀。

1. 定義母版元素

1) 在Axure文件中任意新建一個頁面，在頁面中繪制一個彈出對話框的樣式，參考下圖：

2) 選擇此對話框中的所有元素，點擊右鍵選擇“轉換為母版”，為母版命名并選擇拖放行為Place Anyway，即可以在頁面的任意位置放置母版，創建母版成功后頁面效果如下：

3) 至此，母版創建完成。寫到這里可能大家有一個疑問，上面寫的只是創建母版的步驟，那為什么文章標題叫自定義事件呢？帶著這個疑問咱們進入下文的內容。

2. 為母版自定義事件

由于對話框在頁面中的行為并不是孤立的，點擊對話中的確定、取消按鈕后效果是不同的，比如點擊取消按鈕直接關閉對話框而沒有其他操作，點擊確定按鈕除了關閉對話框之外，還要執行其他操作。此時，我們可以為對話框自定義事件。

1) 在頁面中添加“彈出對話框”母版，并添加一個Label組件，如下圖所示：

其中，Label組件命名為lblMsg，對話框組件命名為dlgConfirm。

我們想要實現的效果是點擊確定按鈕，關閉對話框并在Label中顯示“點擊了確定按鈕”；點擊取消按鈕僅關閉對話框，Label顯示無變化。

2) 進入“彈出對話框”母版編輯界面，為“確定”按鈕新建鼠標單擊用例，如下圖：

3) 選擇動作“觸發事件”，并添加自定義事件onSureButtonClick，并勾選此自定義事件，如下圖所示：

4) 同理，定義“取消”按鈕的單擊動作，并添加自定義事件onCancelButtonClick，如下圖：

5) 關閉母版編輯頁面，返回添加了母版的頁面，單擊對話框就可以看到自定義的事件了，如下圖：

3. 為自定義事件添加用例

1) 為onSureButtonClick事件添加用例，實現點擊確定按鈕時隱藏對話框并在Label中顯示自定義內容的功能，如下圖：

即：將對話框中的所有元素隱藏，并改變Label的文字為“用戶點擊了確定按鈕”。

2) 同理，為onCancelButtonClick事件添加用例，實現點擊取消按鈕時隱藏對話框的功能，如下圖：

3) 預覽頁面，分別點擊確定、取消按鈕查看效果。

說明：

1. 對話框也可以放在一個面板里，點擊按鈕后直接隱藏該面板；
2. 如果對話框被放置在不同的頁面，則可以根據頁面的具體邏輯為onSureButtonClick和onCancelButtonClick事件定義不同的操作，從而滿足各種使用場景。

作者：王春雷，互聯科技創始人。12年互聯網從業經驗，5年產品設計經驗。

本文由 @王春雷 原創發布于人人都是產品經理。未經許可，禁止轉載。