uniapp vue nvue 模態框遮罩

                                                   uniapp  vue  nvue 模態框遮罩

以前 純 Vue 開發的時候：模態框遮罩就是這麼寫的

.popBack{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

完全OK， 沒問題， 可以全部覆蓋 顯示區域

現在使用 uniapp 混合開發的時候， 有使用到 一些原生的東西，（titleNView，tabBar 採用原生 官方推薦） 會發生這樣的情況

比如說：開發左    真機右

 

反正 就是 Vue 的界面 不能遮擋 原生組件， 這樣在需要 模態的 地方就很尷尬。

 

後來進過 翻查資料發現， Uniapp 給大家 提供了幾種方式， 其中一個叫  .nvue , subNVues 的形式支持 全屏模態

例如這樣的效果， 可以覆蓋掉原生組件

但是呢： .nvue 語法呢 是 css 的 閹割版，

nvue 頁面均採用 flex 佈局，不支持其他佈局方式，需要注意的是 flex 默認爲豎向排列，即 flex-direction: column。
nvue 的各組件在安卓端默認是透明的，如果不設置background-color，可能會導致出現重影的問題。
在 App.vue 中定義的全局樣式不會在 nvue 頁面生效。
nvue 切換橫豎屏時可能重新計算 px，導致樣式出現問題，建議有 nvue 的頁面鎖定手機方向。
目前不支持在 nvue 頁面使用 scss、less 等預編譯語言。
不能在 style 中引入字體文件，nvue 中字體圖標的使用參考：weex 加載自定義字體。
class 進行綁定時只支持數組語法（weex 限制）。
nvue 頁面跳轉 vue 頁面時，只能調用  uni-app 的 路由 API 進行跳轉。
nvue 暫不支持運行在模擬器上。
在 created 裏調用 uni-app 的 api 時，可能出現 launch webview id is not ready 錯誤，延時幾百毫秒再執行就不會報錯了。
nvue 頁面 titleNview 設爲 false時，想要模擬狀態欄，可以參考：https://ask.dcloud.net.cn/article/35111。
nvue 中不支持使用 import 的方式引入外部 css，需使用如下方式進行引入，注意：引入外部 css 的 style 節點下寫樣式是不會生效的，需要額外添加新的 style 節點。

 具體使用是這樣的： 在 pages.json 中進行配置。

{
    "path": "pages/home/home",
    "style": {
        "navigationBarTitleText": "首頁",
        "enablePullDownRefresh": true,
        "backgroundColor": "#ebebeb;",
        "backgroundColorBottom": "#ebebeb;",
        "backgroundColorTop": "#ebebeb;",
        "app-plus": {
            "bounce": "none",
            "titleNView": {
                "titleColor": "#fff",
                // "height": "55px",
                "buttons": [{
                    "float": "left",
                    "text": "回款日曆",
                    "fontSize": "17px",
                    "width": "auto"
                }, {
                    "bottom": "10px",
                    "float": "right",
                    "text": "簽到",
                    "fontSize": "17px",
                    "width": "auto"

                }]
            },
            "subNVues": [{
                "id": "calendar", // 唯一標識 
                "path": "pages/home/subnvue/calendar", // 頁面路徑  
                "type": "popup", //這裏不需要
                "style": {
                    "margin": "auto",
                    "width": "85%",
                    "height": "860upx",
                    "border-radius": "10upx"
                }
            }]
        }
    }

}

 這裏是  .nvue 的內容

<template>
	<div class="calendar">
		<div class="top-box">
			<image class="top-box-imagesleft" src="../../../static/img/common/youqiehuan@2x_03.png" mode="" @tap="onDateBefore()"></image>
			<text style="color: #FFFFFF; font-size: 30upx; width: 200rpx;text-align: center;">{{titleTime}}</text>
			<image class="top-box-imagesright" src="../../../static/img/common/zuoqiehuan@2x_03.png" mode="" @tap="onDateAfter()"></image>
		</div>
		<div class="mid-box">
			<div class="mid-box-days">
				<text style="color: #969696; font-size: 26upx;" v-for="(day, index) in days" :key="index">{{day}}</text>
			</div>
			<div class="mid-box-listday">
				<div class="day-line-one" v-for="(itemlist,index) in singMesh" :key="index">
					<div class="dayitem" v-for="item in itemlist" :key="item.index">
						<div class="item-background" :class="[item.isToday?'item-background-red':'']">
							<div class="item-dayInfo">
								<text style="color: #ffffff; font-size: 32upx;text-align: center; margin-top: 25rpx;margin-left: 10rpx;width: 40rpx; height: 100%"
								 v-if="item.isToday">{{item.day}}</text>
								<text style="color: #3f3f3f; font-size: 32upx;text-align: center; margin-top: 25rpx;margin-left: 10rpx;width: 40rpx; height: 100%"
								 v-if="!item.isToday">{{item.day}}</text>
								<div class="item-signInfo" v-if="item.datum">
									<text style="color: #d80e1d; font-size: 18rpx; height: 30rpx;width: 30rpx; text-align: center;line-height: 30rpx">+{{item.datum.score}}
									</text>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom-box">
			<div class="singbutton">
				<text style="color: #FFFFFF; text-align: center;line-height: 88rpx;height: 88rpx;font-size: 32rpx" @tap="onSign()">{{onSignMSG}}</text>
			</div>
			<text style="color: #969696; text-align: center;line-height: 88rpx;height: 88rpx;font-size: 26rpx">已連續簽到{{continueDays}}天</text>
			<text style="color: #1168cf; text-align: center;line-height: 50rpx;height: 50rpx;font-size: 26rpx">不再提示？</text>
		</div>
	</div>
</template>

<script>
	//當前腳本隸屬於 別的作用域 不可與vue 作用域 互通
	import httpHelper from '@/utils/httpHelper.js'
	import toolTimer from '@/utils/tool/toolTimer.js'
	import {
		userManager
	} from '@/utils/userData.js'
	export default {
		data() {
			return {
				days: ['日', '一', '二', '三', '四', '五', '六'],
				currentTime: new Date(),
				titleTime: '',
				singDatum: '', //當天是否簽到
				singDatumDetail: {
					continuousDays: 0
				},
				//簽到詳情
				singMesh: [
					[],
					[],
					[],
					[],
					[],
					[],
				]
			}
		},
		created() {
			userManager.initUserData()

			// userManager.userOffLine()


			// const vm = this;
			// for (let i = 1; i < 20; i++) {
			// 	this.lists.push('item' + i);
			// }

			uni.$on('page-popup', (data) => {

			})

			if (userManager.userInfo.state) {

				//今天是否簽到
				httpHelper.requestPost({
					url: "/novemAppMobile/homePageSign.do",
					data: {
						userId: userManager.getLoginData().id
					},
					success: (res) => {
						if (res.code == 0) {
							//獲取成功  設置會員信息
							//console.log("今天是否簽到res=====>", res)
							this.singDatum = res.object
							//當天沒有簽到 顯示簽到界面
							if (!this.singDatum.is_signed || this.singDatum.is_signed == false) {
								const subNVue = uni.getSubNVueById('calendar');
								subNVue.show('none', 250);
							}
						} else {
							uni.showModal({
								title: '簽到',
								content: '' + res.msg,
								showCancel: false,
							});
						}
					}
				})



				this.currentDeta()
			}
		},
		beforeDestroy() {
			uni.$off('drawer-page')
		},
		methods: {
			//刷新簽到信息
			onRefeshHomePageSign() {
				//今天是否簽到
				httpHelper.requestPost({
					url: "/novemAppMobile/homePageSign.do",
					data: {
						userId: userManager.getLoginData().id
					},
					success: (res) => {
						if (res.code == 0) {
							this.singDatum = res.object
						}
					}
				})
			},
			onDateBefore() {
				this.currentTime.setMonth(this.currentTime.getMonth() - 1)
				console.log("onDateBefore:", this.currentTime)
				this.currentDeta()
			},
			onDateAfter() {
				this.currentTime.setMonth(this.currentTime.getMonth() + 1)
				console.log("onDateAfter:", this.currentTime)
				this.currentDeta()
			},
			currentDeta() {
				this.titleTime = this.currentTime.getFullYear() + '年' + (this.currentTime.getMonth() + 1) + '月'


				let allDay = new Date(this.currentTime.getFullYear(), this.currentTime.getMonth() + 1, 0); //當月總的天數
				let firstDay = new Date(this.currentTime.getFullYear(), this.currentTime.getMonth(), 1); //當月第一天信息
				let firstWeekday = firstDay.getDay(); //當月第一天是禮拜幾


				httpHelper.requestPost({
					url: "/novemAppMobile/getRecordByMonthSign.do",
					data: {
						userId: userManager.getLoginData().id,
						month: toolTimer.formatTime(this.currentTime, "yyyy-M")
					},
					success: (res) => {
						if (res.code == 0) {
							//獲取成功  設置會員信息
							//console.log("獲取簽到信息", res)
							this.singDatumDetail = res.object
							this.singDatumDetailTrim()

							this.showSingMesh({
								allDay: allDay.getDate(),
								firstWeekday: firstDay.getDay(),
								today: this.currentTime.getDate(),
								isOnMonth: toolTimer.formatTime(this.currentTime, "yyyy-MM") == toolTimer.formatTime(new Date(), "yyyy-MM") //是否是當前月份
							})

						} else {
							uni.showModal({
								title: '登陸失敗',
								content: '' + res.msg,
								showCancel: false,
							});
						}
					}
				})
			},

			showSingMesh(datum) {

				this.singMesh = []
				let index = 0
				let dayInfo = {}
				let day = 1

				let time = ""


				for (let i = 0; i < 6; i++) {
					let weekDay = []
					for (let j = 0; j < 7; j++) {
						index = index + 1 //每個格子的ID
						dayInfo = {
							index: index,
							day: ' ',
							singInfo: {},
							isToday: false,
							isSelect: false,
							datum: ''
						}
						if (index > datum.firstWeekday) { //當月第一天的 星期
							if (day <= datum.allDay) { //當月多天數

								time = toolTimer.formatTime(new Date(this.currentTime.getFullYear(), this.currentTime.getMonth(), day),
									"yyyy-MM-dd")
								//console.log("time:", time)
								if (datum.isOnMonth && day == datum.today) {
									dayInfo.isToday = true
								}
								dayInfo.day = day++
								if (this.singDatumDetail.record.length) {
									dayInfo.datum = this.singDatumDetail.record.filter(x => x.time == time)[0]
								}
							}
						}
						weekDay.push(dayInfo)

					}
					this.singMesh.push(weekDay)
				}
			},
			singDatumDetailTrim() {
				this.singDatumDetail.record.forEach(item => {
					item.time = toolTimer.formatTime(new Date(item.signTime), "yyyy-MM-dd")
				})
			},

			onSign() {
				if (!this.singDatum.is_signed || this.singDatum.is_signed == false) {
					//console.log('點擊簽到')
					httpHelper.requestPost({
						url: "/novemAppMobile/dailySign.do",
						data: {
							userId: userManager.getLoginData().id
						},
						success: (res) => {
							if (res.code == 0) {

								this.onRefeshHomePageSign()
								uni.showToast({
									title: '簽到成功',
									duration: 1500
								});
							} else {
								uni.showModal({
									title: '簽到',
									content: '' + res.msg,
									showCancel: false,
								});
							}
						}
					})
				} else {
					//console.log('查看獎勵')
					uni.navigateTo({
						url: '/pages/home/signedDetail'
					})
				}
			},
			sendMessage() {
				const subNVue = uni.getCurrentSubNVue()
				uni.$emit('popup-page', {
					title: '已讀完!',
				})
			},
			handle(item, index) {
				const subNVue = uni.getCurrentSubNVue()
				uni.$emit('popup-page', {
					type: 'interactive',
					info: item + ' 該元素被點擊了!',
				})
			}
		},
		computed: {
			continueDays() {
				return this.singDatumDetail.continuousDays
			},
			onSignMSG() {
				if (!this.singDatum.is_signed || this.singDatum.is_signed == false) {
					return '點擊簽到'
				} else {
					return '查看獎勵'
				}
			}
		}
	}
</script>

<style>
	.calendar {
		flex-direction: column;
		align-items: center;
		/* 	//justify-content: center; */
		background-color: #FFFFFF;

		/* 		border-radius: 13rpx; */
	}



	.top-box {
		/* align-items: center; */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 640rpx;
		height: 88rpx;
		background-color: #d7000f;
		/* 		border-radius: 13rpx; */
	}

	.top-box-imagesleft {
		margin-right: 80rpx;
		height: 40rpx;
		width: 40rpx;
	}

	.top-box-imagesright {
		margin-left: 80rpx;
		height: 40rpx;
		width: 40rpx;
	}

	.mid-box {
		height: 476rpx;
		width: 600rpx;
		align-items: center;
		/* 		background-color: #FFB400; */
	}

	.mid-box-days {
		height: 79rpx;
		width: 540rpx;
		/* 		background-color: #6D6D72; */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.mid-box-listday {
		width: 600rpx;
		height: 412rpx;
		background-color: #EBEBEB;
	}

	.day-line-one {
		height: 70rpx;
		width: 600rpx;
		/* background-color: #6D6D72; */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}







	.item-background-text {
		color: #FFFFFF
	}



	.dayitem {
		align-items: center;
		height: 70rpx;
		width: 84rpx;
		border-left-color: #FFFFFF;
		border-left-width: 1px;
		border-bottom-color: #FFFFFF;
		border-bottom-width: 1px;
		/* background-color: #00aa00; */
	}

	.item-background {
		margin-top: 12rpx;

		align-items: center;
		height: 50rpx;
		width: 50rpx;
		border-radius: 50%;
	}

	.item-text-white {
		color: #FFFFFF;
	}

	.item-background-red {
		align-items: center;
		background-color: #D7000F;
	}

	/* 簽到信息 */
	.item-signInfo {
		height: 30rpx;
		width: 30rpx;
		margin-left: -10rpx;
		margin-top: -10rpx;
		border-radius: 50%;
		background-color: #eb8087;
		align-items: flex-end;
	}

	/* 幾號 */
	.item-dayInfo {
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		height: 30rpx;
		width: 50rpx;
		margin-top: -2rpx;
		margin-left: -8rpx;

	}

	.bottom-box {
		width: 600rpx;
		height: 280rpx;
		/* 	//background-color: #007AFF; */
	}

	.singbutton {
		margin-top: 50rpx;
		width: 600rpx;
		height: 88rpx;
		background-color: #d7000f;
		border-radius: 13rpx;
	}
</style>

也就是這個界面

 

然後是讓 它顯示： 因爲只能在真機上測試

onNavigationBarButtonTap(e) {

    if (userManager.userInfo.state) {
        if (e.index === 0) { //回款日曆
            uni.navigateTo({
                url:'/pages/common/calendar/calendarMoney'
            })
        } else if (e.index === 1) { //簽到

            // #ifdef APP-PLUS
            const subNVue = uni.getSubNVueById('calendar');
            subNVue.show('none', 250);
            // #endif
            
            
        }
    }

},