uniapp多个弹出层组件

第一步：

根目录新建components文件夹，在文件夹下面新建

h-popup-children-list文件夹和h-popup-children-list.vue文件

h-popup-sales-code文件夹和h-popup-sales-code.vue文件

第二步：

h-popup-children-list.vue

template

<template>
	<view>
		<view class="popup" @tap="popup"></view>
		<view class="popup-model">
			
		</view>
	</view>
</template>

script

export default{
	methods:{
		popup(){
			console.log('组件内点击')
			this.$emit('children-fun');
		}
	}
}

style

.popup{
	position: fixed;  
	top:0;
 	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.3);
	z-index:9;
}
.popup-model{
	position: absolute;
	top: 45%;
	left: 50%;
	margin-top: -237upx;
	margin-left: -280upx;
	width: 560upx;
	height: 474upx;
	background: #fff;
	border-radius: 40upx;
	z-index: 10;
}

h-popup-sales-code.vue

template

<template>
	<view>
		<view class="popup" @tap="popup"></view>
		<view class="popup-model">
			<view>
				{{price}}
			</view>
			<view v-for="(item,index) in goodsList">
				{{item}}
			</view>
			<view>
				<view v-for="(item,index) in List">
					{{item}}
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

script

export default{
	props:{
		price:{
			type:Number,
			default:0,
		},
		goodsList:{
			type:Array,
			default:[]
		}
	},
	data(){
		return{
			List:[1,2,3,4]
		}
	},
	methods:{
		popup(){
			console.log('组件内点击')
			this.$emit('son-fun');
		}
	}
}

style

.popup{
	position: fixed;  
	top:0;
 	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.3);
	z-index:9;
}
.popup-model{
	position: absolute;
	top: 45%;
	left: 50%;
	margin-top: -237upx;
	margin-left: -280upx;
	width: 560upx;
	height: 474upx;
	background: #fff;
	border-radius: 40upx;
	z-index: 10;
}

第三步：

demo.vue

template

<template>
	<view>
		
		<button @tap="clickSales">销售码</button>
		<h-popup-children-list v-if="popupChildren" @children-fun="childrenModule"></h-popup-children-list>
		
		<button @tap="clickBuy">购买</button>
		<h-popup-sales-code v-if="popup" :price="price" :goodsList="goodsList" @son-fun="goDetil"></h-popup-sales-code>
		
	</view>
</template>

script

	export default {
		data() {
			return {
				popup:false,
				goodsList:[7,8,9],
				price:6,
				
				popupChildren:false,
				
			}
		},
		onLoad() {

		},
		methods: {
			//关闭 - 弹出层 - 我的孩子
			childrenModule(){
				this.popupChildren = false
			},
			//显示 - 弹出层 - 我的孩子
			clickBuy(){
				this.popupChildren = true
			},
			//关闭 - 弹出层 - 销售码
			goDetil(){
				console.log("页面接收组件数据");
				this.popup = false
			},
			//显示 - 弹出层 - 销售码
			clickSales(){
				this.popup = true
			},
		}
	}