[JavaScript知识库]简单易修改的弹框组件

使用场景

弹窗组件

适用框架 vue, uniapp
使用再uniapp 框架中可简单修改标签与尺寸单位后使用
px与rpx

<!-- vue -->
<template>
	<div v-show="ishide" @touchmove.stop.prevent>
		<!-- 遮罩 -->
		<div class="mask" :style="maskStyle"></div>
		<!-- 内容 -->
		<div class="tip" :style="tipStyle">
			<slot></slot>
		</div>
	</div>
</template>
<!-- uniapp -->
<!-- 
<template>
	 <view v-show="ishide" @touchmove.stop.prevent>
	 	<view class="mask" :style="maskStyle"></view>
	 	<view class="tip" :style="tipStyle">
	 		<slot></slot>
	 	</view>
	 </view>
</template>
 -->

<script>
	export default {
		props: {
			// 控制弹窗显隐
			ishide: {
				type: Boolean,
				required: true
			},
			// 设置弹窗层级
			zindex: {
				type: Number,
				default: 99
			},
			// 设置遮罩透明度
			opacity: {
				type: Number,
				default: 0.6
			},
			// 设置内容区宽度
			width: {
				type: String,
				default: '70%'
			},
			// 设置内容区高度
			height: {
				type: String,
				default: '300px'
			},
			// 设置内容区圆角
			radius: {
				type: String,
				default: '10px'
			},
			// 设置内容区底色
			bgcolor: {
				type: String,
				default: '#FFFFFF'
			}
		},
		computed: {
			// 遮罩样式
			maskStyle() {
				return `
					z-index:${this.zindex};
					background:rgba(0,0,0,${this.opacity});
				`
			},
			// 内容样式
			tipStyle() {
				return `
					width:${this.width};
					height:${this.height};
					z-index:${this.zindex+1};
					border-radius:${this.radius};
					background-color:${this.bgcolor};
				`
			}
		}
	}
</script>

<style scoped>
	.mask {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		top: 0;
	}

	.tip {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
</style>

组件使用

<template>
	<div>
		<!-- 开关控制 -->
		<button type="default" @click="isshow=!isshow">弹窗</button>
		<!-- 使用组件 -->
		<zwy-popup :ishide='isshow' width="70%" height="700rpx" radius="40rpx">
			<!-- 自定义展示内容 -->
			<div class="content">
				<div class="image"></div>
				<div class="title">活动标题</div>
				<div>内容</div>
				<div>内容</div>
				<div class="info">内容</div>
				<div class="btn">按钮</div>
			</div>
			<!-- 自定义关闭按钮 -->
			<div class="close" @click="isshow=false">?</div>
		</zwy-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isshow: false
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background-color: coral;
		border-radius: 10px;
	}

	.image {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: #4CD964;
	}

	.title {
		font-size: 18px;
		margin: 30px 0 20px 0;
	}

	.info {
		margin: 20px 0;
		font-size: 12px;
		text-align: center;
		background: #F5F5F5;
		border-radius: 8px;
		padding: 8px 10px;
	}

	.btn {
		width: 100px;
		height: 30px;
		font-size: 12px;
		line-height: 30px;
		text-align: center;
		border-radius: 16px;
		background: linear-gradient(-90deg, #FEEF43, #E9D81B);
	}

	.close {
		width: 30px;
		height: 30px;
		color: #FFFFFF;
		line-height: 30px;
		text-align: center;
		border-radius: 50%;
		border: 1px solid #FFFFFF;
		position: relative;
		bottom: -10%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>