點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來！

前言

注意: 下方popup 組件語法使用原生小程序，copy需做調整

popup主要用來顯示了一個彈出式窗口，其中列出了可用的用戶管理屬性

組件功能實現介紹

wxml實現部分

• isShowPop用來控制組件的顯示和隱藏
• needTitle和title分別是兩種title的樣式

js實現部分

詳細請看下方註釋

css實現部分

只寫了組件的公共樣式部分，slot內容寫到具體頁面了

組件調用實現介紹

wxml實現部分

• popup組件引入後調用
• isShowPop是傳入子組件的屬性，控制是否顯示
• bindcancel、bindconfirm是傳入子組件的方法，用this.triggerEvent('xxx')等方法調用，pCancel、pConfirm是this.triggerEvent('xxx')調用的執行的具體方法
• slot對應組件 slot name="after"

js實現部分

詳細請看下方註釋

css實現部分

這裡引入了Iconfont-阿里巴巴矢量圖標庫，點擊查看

上述就是一個微信小程序pop組件實現的全部代碼，看起來是不是很簡單了，趕緊自己動手試試吧，沒有你想象的那麼難！！！

公告

更多資源敬請關注！

閱讀更多 web秀 的文章

關鍵字: 組件 微信 程序