文章目錄

• 🍋前言：
• 🍍正文
• • 1、探討需求封裝popup自定義彈窗組件
  • 2、實戰開發彈窗組件
  • • 2.1 子組件內容 popup.vue文件
    • 2.2 父組件引用子組件
  • 3、效果圖預覽
  • • 3.1 不使用具名插槽的原有樣式效果
    • 3.2 使用具名插槽之后樣式效果
• 🎃專欄分享：

🍋前言：

大家好我是不苒，本人男，頭像是女朋友照片，很多大佬都以為我是女的，淺淺的解釋一下哈哈。很高興書寫博客與大家分享知識。
本片文章主要講的是，使用uniapp開發背景下，使用Vue的具名插槽封裝一個自定義的彈窗組件popup，感興趣的小伙伴可以學習一下，如果發現本人編寫有問題的話，歡迎大家隨時來評論區探討支出問題，我也會及時更正的。

話不多說直接上正文一起來學習一下封裝自定義彈窗組件吧！

🍍正文

1、探討需求封裝popup自定義彈窗組件

首先我們需要探討一下，封裝自定義的組件都需要什么功能

需要一個半透明灰色的背景，用于區分與非彈窗內容，點擊灰色區域也可以關閉彈窗。

需要一個關閉按鈕和兩個操作按鈕，一個確定，一個取消。

彈窗內容：標題，內容區域，因為是自定義所以都使用了具名插槽，也可以設置默認的顯示內容。

彈窗的顯示位置，本次封裝只考慮了居中與頁面底部兩個常用顯示位置。

2、實戰開發彈窗組件

2.1 子組件內容 popup.vue文件

<template><view class="mark" v-if="isShow" @click="close"><view :class="bottom?'bottom':'center'" class="content" ><view @click="close"><image class="close" src="../static/close.png" ></image></view><slot name="title"><view class="title">子組件默認標題</view></slot><slot name="body"><text style="font-size: 14px;">確定要取消訂單嗎？取消之后購物車也將清空。</text></slot><slot name="bottom"><view class="btns"><view class="confirm btn" @click="confirm">確定</view><view class="cancel btn" @click="cancel">取消</view></view></slot></view></view> </template><script>export default {props: {isShow: {type: Boolean,default: false},// 子組件接收一個布爾類型的bottom，如果為true則彈窗則在頁面的底部，false為默認居中顯示bottom: {type: Boolean,default: false}},data() {return{}},methods: {close(){this.$emit('close')},cancel(){this.$emit('cancel')},confirm(){this.$emit('confirm')},}} </script><style lang="scss">.mark {position: fixed;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.3);left: 0;bottom: 0;top: 0;right: 0;display: flex;justify-content: center;align-items: center;}.bottom{position: absolute;bottom: 0 ;width: 100vw;}.center{width: 80vw;position: relative;}.content{background-color: #fff;border-radius: 20rpx;height: 400rpx;padding: 40rpx;box-sizing: border-box;.close{position:absolute;right:30rpx;top: 20rpx;width: 40rpx;height: 40rpx;}.title{text-align: center;font-weight: 600;height: 50rpx;line-height: 50rpx;margin-bottom: 20rpx;}.btns{bottom: 20px;position: absolute;display: flex;justify-content: space-between;width: 88%;.btn{width: 160rpx;height: 80rpx;text-align: center;line-height: 80rpx;border-radius: 20rpx;}.confirm{background: bisque;}.cancel{background: #ccc;}}} </style>

注意：

• 本文CSS內容使用了scss語法，不使用的話可以將嵌套的樣式拿出即可。

解釋說明：

• isShow 用于控制彈出層的顯示與隱藏，在點擊灰色空白區域和右上角關閉按鈕，還有確定按鈕與取消按鈕之后都會關閉彈出層。
• bottom 用于控制彈出層的顯示位置，默認為居中顯示
• methods中向父組件傳遞了三個方法，分別是關閉彈窗，點擊確定按鈕，點擊取消按鈕
• 使用具名插槽，在父組件中可以自定義插槽中的內容，方便不同位置的彈窗顯示樣式

2.2 父組件引用子組件

<template><view class="container"><view class="btn" @click="open">顯示彈出層</view> <popup :isShow='visible' :bottom='true' @close="closeMadle" @cancel="cancel" @confirm="confirm"><template v-slot:title><view class="title">父組件自定義標題</view></template><template v-slot:body><view class="body" >這里是父組件引用子組件，使用具名插槽編寫的自定義內容和樣式。</view></template></popup></view></template><script>import popup from '../../components/popup.vue'export default {components: {popup},data() {return {visible:false,}},methods: {open(){this.visible = trueuni.hideTabBar()},closeMadle(){this.visible = falseuni.showTabBar()},confirm(){// 這里調用接口執行點擊確定后的操作并關閉彈窗console.log('點擊了確認按鈕')this.visible = false},cancel(){// 點擊了取消按鈕直接關閉彈窗console.log('點擊了取消按鈕')this.visible = false},}} </script><style lang="scss>.title{text-align: center;font-weight: 600;height: 50rpx;line-height: 50rpx;margin-bottom: 20rpx;}.body{font-size: 14px;font-weight: 600;color: darkorchid;} </style>

注意：

• 本文CSS內容使用了scss語法，不使用的話可以將嵌套的樣式拿出即可。

解釋說明：

• 引用子組件，并在conponents中注冊。
• bottom 為true用于控制彈出層的彈窗在底部顯示，不傳默認為居中顯示。
• @語法接收子組件中向父組件傳遞的三個方法，在父組件methods中定義三個方法做相應的操作。
• 使用具名插槽，自定義插槽中的內容。
• uni.showTabBar() 和 uni.hideTabBar()兩個方法用于控制原生tabbar的顯示與隱藏。

3、效果圖預覽

3.1 不使用具名插槽的原有樣式效果

3.2 使用具名插槽之后樣式效果

這里是演示的那個顯示在頁面底部的彈窗，如果不需要直接將代碼片段里的:bottom="true"刪掉即可

🎃專欄分享：

小程序項目實戰專欄：《uniapp小程序開發》
前端面試專欄地址：《面試必看》

---

? $名言警句：說能做的，做說過的$

? $原創不易，還希望各位大佬支持一下$

👍 $點贊，你的認可是我創作的動力！$

?? $收藏，你的青睞是我努力的方向！$

?? $評論，你的意見是我進步的財富！$

總結

以上是生活随笔為你收集整理的【小程序开发】—— 封装自定义弹窗组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。