uniapp原生子窗体subnvue(弹出层确认取消)

 目录结构

 nvue代码

<template>
	<view class="pop" @click.stop="">
		<view class="model-box cc-column puff-in-center">
			<view class="_cont">
				<view class="_title">
					<text class="_title_text">{{title}}</text>
				</view>
				<view class="_content">
					<text class="_content_text">{{content}}</text>
				</view>
			</view>
			<view class="_mo_btn">
				<!--:style="{color:cancelColor||color}"  -->
				<view class="_btn" @click="closeDialog" v-if="showCancel"><text class="_text" style="	font-size: 16px;
		color: #333;">{{cancelText}}</text></view>
				<view class="_line"></view>
				<view class="_btn" @click="onOk" v-if="showCancel"><text class="_text" style="color: #00dbff;">{{confirmText}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		subNvueModal
	} from '../../common'
	export default {
		mixins: [subNvueModal],
		methods: {
			/**
			 * 点击确认按钮
			 */
			onOk() {
				//向原生子窗体传递数据
				uni.$emit('page-popup', {
					msg: "确定"
				});

			},
			/**
			 * 点击取消按钮
			 */
			closeDialog() {
				uni.$emit('page-popup', {
					msg: "取消"
				});
			}
		},
		}
</script>

<style scoped lang="scss">
	$border-color: rgba(0, 0, 0, .1);
	$btn-active: rgba(0, 0, 0, .1);

	.pop {
		// width: 750rpx;
		// flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.test {
		width: 500rpx;
		// height: 500rpx;
		background: #bfa;
		border-radius: 30rpx;
	}

	.model-box {
		// margin: auto;
		width: 540rpx;
		background: #ffffff;
		border-radius: 30rpx;
		overflow: hidden;

		._cont {
			// height: 0;
			padding: 30rpx;

			._title {
				._title_text {
					font-weight: bold;
					font-size: 36rpx;
					line-height: 50rpx;
					text-align: center;
				}
			}

			._content {
				padding: 20rpx 0;
				// max-height: 60vh;
				// overflow: auto;
				margin: 20rpx 0;

				._content_text {
					font-size: 32rpx;
					line-height: 40rpx;
					text-align: center;
				}
			}
		}

		._mo_btn {
			width: 540rpx;
			border-top: 1px $border-color solid;
			font-size: 36rpx;
			display: flex;
			flex-flow: row;

			._btn {
				flex: 1;
				height: 80rpx;

				._text {
					line-height: 80rpx;
					font-weight: bold;
					text-align: center;
				}

				&:active {
					background-color: $btn-active;
				}
			}

			._line {
				width: 1px;
				background-color: $border-color;
			}

		}

	}
</style>

pages.json引用

{
			"path": "pages/fabu/fabu",
			"style": {
				"navigationBarBackgroundColor": "#FFFFFF",
					// "app-plus": {
					// 	"titleNView": false //禁用原生导航栏
					// },
				"navigationBarTitleText": "发布",
				"enablePullDownRefresh": false,
				"app-plus": {
					"subNVues": [{
						"id": "modal", // 唯一标识  
						// "path": "platform/app-plus/subNVue/testSubNVue", // 页面路径  
						"path": "pages/fabu/modalSubNVue", // 页面路径  
						"type": "popup",
						"style": {
							"position": "dock", //除 popup 外，其他值域参考 5+ webview position 文档
							"margin":"auto",
							"background":"transparent"
						}
					}]
				}
			}

		}

index页面使用

SubNvue() {
				// #ifdef APP-PLUS


				let subNVue
				try {
					subNVue = uni.getSubNVueById('modal')
				} catch (e) {}
				if (!subNVue) {
					this.$showToast('仅App端支持，且pages.json已配置')
					return
				}
				// 打开 nvue 子窗体  
				modalProp.set({
					content: '当前内容不为空,是否清空',
					title: '提示',
				})
				uni.$once('downPop', () => {
					console.log("modalProp", modalProp);
				})
				const data = modalProp.get()
				uni.$emit('setPop', data)
				subNVue.show('zoom-fade-out', 300, function() {
					// 打开后进行一些操作...  
					console.log('打开了？');
				});
				// 关闭 nvue 子窗体  
				// subNVue.hide('fade-out', 300)
				// #endif
			},

// 弹出层做的操作
			subNames() {

				if (this.msg == "确定") {
					console.log('点击了确认')
					this.src = ''
					this.content = ''
					// 清除list集合中的所有数据
					this.imageList.splice(0, this.imageList.length)
					const subNVue = uni.getSubNVueById('modal')
					// 关闭弹窗
					subNVue.hide('none', 300)
				}
				if (this.msg == "取消") {
					console.log('点击了取消')
					const subNVue = uni.getSubNVueById('modal')
					// 关闭弹窗
					subNVue.hide('none', 300)
				}

			}

页面监听

onLoad() {
			//const self = this;
			uni.$on('page-popup', (data) => {
				this.msg = data.msg;

				console.log(data)
				this.subNames()
				console.log("信息", this.msg)
			});
			
		},
		onUnload() {
			//移除监听
			uni.$off('page-popup')
		},