??前言：
大家好我是不苒，本人男，頭像是女朋友照片，很多大佬都以為我是女的，淺淺的解釋一下哈哈。很高興書(shū)寫(xiě)博客與大家分享知識(shí)。
本片文章主要講的是，使用uniapp開(kāi)發(fā)背景下，使用Vue的具名插槽封裝一個(gè)自定義的彈窗組件popup，感興趣的小伙伴可以學(xué)習(xí)一下，如果發(fā)現(xiàn)本人編寫(xiě)有問(wèn)題的話，歡迎大家隨時(shí)來(lái)評(píng)論區(qū)探討支出問(wèn)題，我也會(huì)及時(shí)更正的。
話不多說(shuō)直接上正文一起來(lái)學(xué)習(xí)一下封裝自定義彈窗組件吧！
??正文
1、探討需求封裝popup自定義彈窗組件
首先我們需要探討一下，封裝自定義的組件都需要什么功能
- 需要一個(gè)半透明灰色的背景，用于區(qū)分與非彈窗內(nèi)容，點(diǎn)擊灰色區(qū)域也可以關(guān)閉彈窗。
- 需要一個(gè)關(guān)閉按鈕和兩個(gè)操作按鈕，一個(gè)確定，一個(gè)取消。
- 彈窗內(nèi)容：標(biāo)題，內(nèi)容區(qū)域，因?yàn)槭亲远x所以都使用了具名插槽，也可以設(shè)置默認(rèn)的顯示內(nèi)容。
- 彈窗的顯示位置，本次封裝只考慮了居中與頁(yè)面底部?jī)蓚€(gè)常用顯示位置。
2、實(shí)戰(zhàn)開(kāi)發(fā)彈窗組件
2.1 子組件內(nèi)容 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">子組件默認(rèn)標(biāo)題</view>
</slot>
<slot name="body">
<text style="font-size: 14px;">確定要取消訂單嗎？取消之后購(gòu)物車(chē)也將清空。</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
},
// 子組件接收一個(gè)布爾類(lèi)型的bottom，如果為true則彈窗則在頁(yè)面的底部，false為默認(rèn)居中顯示
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內(nèi)容使用了scss語(yǔ)法，不使用的話可以將嵌套的樣式拿出即可。
解釋說(shuō)明：
isShow用于控制彈出層的顯示與隱藏，在點(diǎn)擊灰色空白區(qū)域和右上角關(guān)閉按鈕，還有確定按鈕與取消按鈕之后都會(huì)關(guān)閉彈出層。bottom用于控制彈出層的顯示位置，默認(rèn)為居中顯示methods中向父組件傳遞了三個(gè)方法，分別是關(guān)閉彈窗，點(diǎn)擊確定按鈕，點(diǎn)擊取消按鈕使用具名插槽，在父組件中可以自定義插槽中的內(nèi)容，方便不同位置的彈窗顯示樣式
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">
父組件自定義標(biāo)題
</view>
</template>
<template v-slot:body>
<view class="body" >
這里是父組件引用子組件，使用具名插槽編寫(xiě)的自定義內(nèi)容和樣式。
</view>
</template>
</popup>
</view>
</template>
<script>
import popup from '../../components/popup.vue'
export default {
components: {
popup
},
data() {
return {
visible:false,
}
},
methods: {
open(){
this.visible = true
uni.hideTabBar()
},
closeMadle(){
this.visible = false
uni.showTabBar()
},
confirm(){
// 這里調(diào)用接口執(zhí)行點(diǎn)擊確定后的操作并關(guān)閉彈窗
console.log('點(diǎn)擊了確認(rèn)按鈕')
this.visible = false
},
cancel(){
// 點(diǎn)擊了取消按鈕直接關(guān)閉彈窗
console.log('點(diǎn)擊了取消按鈕')
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內(nèi)容使用了scss語(yǔ)法，不使用的話可以將嵌套的樣式拿出即可。
解釋說(shuō)明：
- 引用子組件，并在
conponents中注冊(cè)。bottom為true用于控制彈出層的彈窗在底部顯示，不傳默認(rèn)為居中顯示。@語(yǔ)法接收子組件中向父組件傳遞的三個(gè)方法，在父組件methods中定義三個(gè)方法做相應(yīng)的操作。使用具名插槽，自定義插槽中的內(nèi)容。uni.showTabBar()和uni.hideTabBar()兩個(gè)方法用于控制原生tabbar的顯示與隱藏。
3、效果圖預(yù)覽
3.1 不使用具名插槽的原有樣式效果
3.2 使用具名插槽之后樣式效果
這里是演示的那個(gè)顯示在頁(yè)面底部的彈窗，如果不需要直接將代碼片段里的
:bottom="true"刪掉即可
??專(zhuān)欄分享：
小程序項(xiàng)目實(shí)戰(zhàn)專(zhuān)欄：《uniapp小程序開(kāi)發(fā)》
前端面試專(zhuān)欄地址：《面試必看》文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-802442.html
? 名言警句：說(shuō)能做的，做說(shuō)過(guò)的 \textcolor{red} {名言警句：說(shuō)能做的，做說(shuō)過(guò)的} 名言警句：說(shuō)能做的，做說(shuō)過(guò)的
? 原創(chuàng)不易，還希望各位大佬支持一下 \textcolor{blue}{原創(chuàng)不易，還希望各位大佬支持一下} 原創(chuàng)不易，還希望各位大佬支持一下
?? 點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！ \textcolor{green}{點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！} 點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！
?? 收藏，你的青睞是我努力的方向！ \textcolor{green}{收藏，你的青睞是我努力的方向！} 收藏，你的青睞是我努力的方向！
?? 評(píng)論，你的意見(jiàn)是我進(jìn)步的財(cái)富！ \textcolor{green}{評(píng)論，你的意見(jiàn)是我進(jìn)步的財(cái)富！} 評(píng)論，你的意見(jiàn)是我進(jìn)步的財(cái)富！
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-802442.html
到了這里，關(guān)于【小程序開(kāi)發(fā)】—— 封裝自定義彈窗組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
