UNI-APP弹窗

组件代码

<template>
	<view>
		<!-- 蒙版 -->
		<view class="mask" @click="close()" v-show="tanchuang"></view>
		<!-- 弹窗 -->
		<view class="pop" :style="{height:height*0.8 + 'px',top:tanchuang?height*0.2 + 'px':height + 'px'}">
			<!-- 头部 -->
			<view class="" style="width: 100%;" @click="close()">
				<view class="huaxian"></view>
			</view>
			<!-- 内容 -->
			<scroll-view scroll-y="true" :style="{maxHeight: `${scrollHeight}px`}">
				<slot></slot>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	export default {
		name: "pop-up",
		props: {
			tanchuang: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				height: systemInfo.screenHeight,
				scrollHeight: systemInfo.screenHeight * 0.8 - uni.upx2px(100),

			};
		},
		methods: {
			close() {
				this.$emit('close');
			},
		}
	}
</script>

<style lang="scss">
	/* 划线 */
	.huaxian {
		height: 10rpx;
		width: 200rpx;
		background: #bbbbbb;
		border-radius: 100rpx;
		margin: auto;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	/* 蒙版 */
	.mask {
		z-index: 998;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	/*  */

	.pop {
		position: fixed;
		// width: 750rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		left: 0;
		right: 0;
		transition-property: top;
		transition-duration: 150ms;
		transition-timing-function: ease-in-out;
		z-index: 999;

		.title {
			padding: 30rpx 30rpx 0;
			align-items: center;
			justify-content: center;
			line-height: 40rpx;
		}

		&--close-btn {
			height: 40rpx;
			width: 40rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
	}

	.border-bottom {
		width: 750rpx;
		border-bottom: 1rpx solid #e8e8e8;
		transform: scaleY(.5);
		margin-top: 30rpx;
	}
</style>

组件的使用

<template>
	<view>

		<button @click="tanchuang = true">打开</button>
		<pop-up :tanchuang="tanchuang" @close="tanchuang = false">

			<view class="article-list">

				弹窗内容

			</view>

		</pop-up>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tanchuang: false
			}
		},
		methods: {

		}
	}
</script>

<style>

</style>