uni-app底部弹出弹框，封装组件

组件内容

<template>
//@touchmove.prevent不让遮罩层后的页面滚动
//@tap.self只触发自己，或者给mask的子级.content加@tap.stop阻止事件默认行为
	<view @touchmove.prevent :class="sc" class="tankuang width-100 height-100 position-fixed p-left-0 p-top-0">
		<view class="mask width-100 height-100"  @tap.self="$emit('maskTap')">
			<view class="content width-100 position-absolute p-left-0 bj-white p-30" >
				<slot></slot>
				<!-- 按钮 -->
				<!--  @tap="$emit('bottomTap')" class="bottomBtn width-100 bj-primary-co$emit('bottomTap')自定义事件 -->
			<view @tap="$emit('bottomTap')" class="bottomBtn width-100 bj-primary-color text-center text-white position-fixed p-bottom-0 p-left-0">{{title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:String,//按钮内容
			sc:String //控制calss类名
		},
		data() {
			return {
			};
		},
		methods:{
			
		}
	}
</script>

<style>
	/* 底部弹框 */
	.mask {
		background-color: rgba(0, 0, 0, 0.5);
	}

	.content {
		height: 1037upx;
		border-radius: 20upx 20upx 0 0;
		box-sizing: border-box;
		bottom: 0;
	}

	.none {
		display: none;
	}

	@keyframes contentHide {
		from {
			transform: translateY(0%);
		}

		to {
			transform: translateY(100%);
		}
	}

	@keyframes maskHide {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.hide .mask {
		animation: maskHide 0.2s linear both;
	}

	.hide .mask .content {
		animation: contentHide 0.2s linear both;
	}

	@keyframes contentShow {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0%);
		}
	}

	@keyframes maskShow {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.show {
		display: block;
	}

	.show .mask {
		animation: maskShow 0.2s linear both;
	}

	.show .mask .content {
		animation: contentShow 0.2s linear both;
	}
	
	/* 底部按钮 */
	.bottomBtn {
		height: 100upx;
		line-height: 100upx;
		font-size: 26upx;
	}
</style>

页面

//点击这三个按钮
<view class="display-flex" @tap="listTap('car')"></view>
<view class="display-flex" @tap="listTap('address')"></view>
<view class="sevenBox display-flex" @tap="listTap('service')"></view>

<!-- 底部弹框1 -->
//popup组件名字，全局注册
		<popup title="加入购物车" :sc="fuClassName.car" @maskTap="maskTap('car')" @bottomTap="carTap">
			购物车
		</popup>
		
		<popup title="选择新的地址" :sc="fuClassName.address"  @maskTap="maskTap('address')" @bottomTap="addressTap">
			地址
		</popup>
		
		<popup title="确定" :sc="fuClassName.service"  @maskTap="maskTap('service')" @bottomTap="serviceTap">
			服务
		</popup>


//数据区
		data(){
			returm{
				fuClassName:{
					car:"none",
					address:"none",
					service:"none",
				},
			}
		},

		//方法区
		methods: {
			/* 点击出现 */
			listTap(key){
				this.fuClassName[key]='show'
			},
			/*点击底部弹框遮罩层 弹框消失  */
			maskTap(key) {
				this.fuClassName[key] = "hide";
				setTimeout(() => {
					this.fuClassName[key] = "none";
				}, 200)
			},
			/* 点击弹框里的按钮 */
			carTap(){
				this.maskTap('car')
				console.log("1")
			},
			addressTap(){
				this.maskTap('address')
				console.log("2")
			},
			serviceTap(){
				this.maskTap('service')
				console.log("3")
			}
			
	
			
			
		}