在小程序中自定義彈窗組件

由於業務須要在小程序里加上不少的彈窗，就想寫一個組件方便使用；

建立組件

1. 新建文件夾component專門放組件，
2. 新建popup頁面，在popup.json中設置：

{
    "component": true
}
複製代碼

代表它是一個組件，咱們稱之爲「子組件」 3. 注意：在組件wxss中不該使用ID選擇器、屬性選擇器和標籤名選擇器。（只使用class）

如何使用組件

便於區分，引用子組件的頁面咱們稱之爲「父組件，」 在父組件的json裏先引用子組件：

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}
複製代碼

父組件傳值給子組件

由於這個自定義的彈窗組件會應用於不少不一樣的頁面，因此顯示的彈窗標題也是不一樣的，這就是須要父組件給子組件自定義標題，也就是子組件的標題應該從父組件中接受到的。 子組件裏： wxml

<view class="page">
  <view>{{popupTitle}}</view>
</view>
複製代碼

js

Component({
  properties: {
    // 這裏定義了innerText屬性，屬性值能夠在組件使用時指定
    popupTitle: { //彈窗標題
      type: String,
      value: '默認值', 
    }
  },
})
複製代碼

父組件裏： wxml

<popup popup-title="{{pagetitle}}"/>
複製代碼

js

data: {
    pagetitle: '我是頁面標題',
}
複製代碼

. 在子組件中自定義值是以小駝峯的形式書寫的，可是在父組件傳的時候要以「-」鏈接。

子組件改變父組件的值

這個組件的顯示和隱藏都是在父組件決定的，可是由於我這是一個全屏的彈窗，覆蓋了整個屏幕，因此想要關閉彈框只能想辦法在子組件的點擊事件上想辦法。 基本邏輯是這樣的： 操做流程：打開頁面- 點擊彈框（彈出子組件）- 點擊關閉（點擊子組件關閉彈窗） 數據流程：打開頁面-點擊彈框（傳入彈窗標題、點同意功結果、其餘參數）-點擊關閉（在父組件上自定義組件，而後子組件關閉按鈕監聽onTap事件，點擊子組件關閉按鈕時，會通知父組件去改變狀態）

邏輯：

1. 在子組件中給要觸發的元素加 bindtap = 'onTap'
2. 而後經過在method中設置onTap函數
3. 在onTap中的triggerEvent中設置要觸發父組件事件的函數名稱
4. 父組件接收到字組件的消息，而後觸發事件

具體參考：小程序-組件通訊

子組件： wxml

<view class="hide-btn" bindtap="onTap">×</view>
複製代碼

js

methods: { //放自定義的方法
    onTap: function () {
      var myEventDetail = {} // detail對象，提供給事件監聽函數
      var myEventOption = {} // 觸發事件的選項
      console.log(`子組件：'向父組件發送通知，我要關閉彈窗'`)
      this.triggerEvent('hidepopop', myEventDetail, myEventOption)
    }
  },
複製代碼

父組件 wxml

<popup 
bindhidepopop="hidePopop" 
is-show-popup="{{isShowPopup}}" 
popup-title="{{popupTitle}}" 
popup-content="{{popupContent}}"
/>
複製代碼

js

hidePopop: function(e) {
    console.log(e.detail) // 自定義組件觸發事件時提供的detail對象
    console.log('父組件：我接受到了子組件的關閉彈窗的通知！');
    this.setData({
      isShowPopup: true
    })
  }
複製代碼

參考小程序-自定義組件 代碼地址：github.com/AnsonZnl/wx…