小程序開發(fā)實戰(zhàn)指南之封裝自定義彈窗組件
1、探討需求封裝popup自定義彈窗組件
首先我們需要探討一下,封裝自定義的組件都需要什么功能
- 需要一個半透明灰色的背景,用于區(qū)分與非彈窗內(nèi)容,點擊灰色區(qū)域也可以關(guān)閉彈窗。
- 需要一個關(guān)閉按鈕和兩個操作按鈕,一個確定,一個取消。
- 彈窗內(nèi)容:標題,內(nèi)容區(qū)域,因為是自定義所以都使用了具名插槽,也可以設(shè)置默認的顯示內(nèi)容。
- 彈窗的顯示位置,本次封裝只考慮了居中與頁面底部兩個常用顯示位置。
2、實戰(zhàn)開發(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">子組件默認標題</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內(nèi)容使用了scss語法,不使用的話可以將嵌套的樣式拿出即可。解釋說明:
- isShow 用于控制彈出層的顯示與隱藏,在點擊灰色空白區(qū)域和右上角關(guān)閉按鈕,還有確定按鈕與取消按鈕之后都會關(guān)閉彈出層。
- bottom 用于控制彈出層的顯示位置,默認為居中顯示
- methods中向父組件傳遞了三個方法,分別是關(guā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"> 父組件自定義標題 </view> </template> <template v-slot:body> <view class="body" > 這里是父組件引用子組件,使用具名插槽編寫的自定義內(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í)行點擊確定后的操作并關(guān)閉彈窗 console.log('點擊了確認按鈕') this.visible = false }, cancel(){ // 點擊了取消按鈕直接關(guān)閉彈窗 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內(nèi)容使用了scss語法,不使用的話可以將嵌套的樣式拿出即可。
解釋說明:
- 引用子組件,并在conponents中注冊。
- bottom 為true用于控制彈出層的彈窗在底部顯示,不傳默認為居中顯示。
- @語法接收子組件中向父組件傳遞的三個方法,在父組件methods中定義三個方法做相應(yīng)的操作。
- 使用具名插槽,自定義插槽中的內(nèi)容。
- uni.showTabBar() 和 uni.hideTabBar()兩個方法用于控制原生tabbar的顯示與隱藏。
3、效果圖預(yù)覽
3.1 不使用具名插槽的原有樣式效果
3.2 使用具名插槽之后樣式效果
這里是演示的那個顯示在頁面底部的彈窗,如果不需要直接將代碼片段里的
:bottom="true"
刪掉即可
總結(jié)
到此這篇關(guān)于小程序開發(fā)實戰(zhàn)指南之封裝自定義彈窗組件的文章就介紹到這了,更多相關(guān)小程序封裝自定義彈窗組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
統(tǒng)計出現(xiàn)最多的字符次數(shù)的js代碼
一小段代碼,經(jīng)常出現(xiàn)在面試筆試題中的:統(tǒng)計一個字符串中出現(xiàn)最多的字符的次數(shù),可以是英文或者數(shù)字。2010-12-12js生成1到100的隨機數(shù)最簡單的實現(xiàn)方法
在本篇文章里小編給大家整理了關(guān)于js生成1到100的隨機數(shù)最簡單的實現(xiàn)方法,有需要的朋友們可以學(xué)習(xí)下。2020-02-02js類定義函數(shù)時用prototype與不用的區(qū)別示例介紹
沒有使用prototype的方法相當于類的靜態(tài)方法,相反,使用prototype的方法相當于類的實例方法,不許new后才能使用2014-06-06按鍵測試,支持像 Ctrl+Alt+Shift+T 的組合鍵
按鍵測試,支持像 Ctrl+Alt+Shift+T 的組合鍵...2006-10-10JavaScript邏輯運算符相關(guān)總結(jié)
這篇文章主要介紹了JavaScript邏輯運算符的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09