记录uni-app横屏项目：自定义弹出框

目录

前言：

正文：

---

前言：横屏的尺寸问题

最近使用了uniapp写了一个横屏的微信小程序和H5的项目，也是本人首次写的横屏项目，多少是有点踩坑+不太适应。。。

先说最让我一脸懵的点，尺寸大小，下面一段代码，设置文字的大小伟24rpx；横屏，竖屏下的效果如图

<view class="text" style="font-size: 24rpx">Jay丶萧邦</view>

可以很直观的看出来，横竖屏之间的尺寸差异是蛮大的，大概相差2倍的样子，所以要是业务设计要求可以旋转屏幕的话，得做适配工作，这里就不再多说；

正文：直接附上源码，不多说

言归正传，因为我看UI库好像都不太满足横屏的项目，所以有很多的东西都需要自己手撕一个，弹出框就是其一，先看效果哈：

uniapp横屏弹出框

如果觉得还比较符合您的需求，拿来整改整改即可，直接上代码：

<template>
	<view class="dialog-overlay" v-if="visible" :style="{ zIndex: zIndex }" @tap="closeMask">
		<view class="dialog" v-if="dialogVisible" :style="[getStyle]" :class="[showAnimate ? 'bounce-enter-active' : 'bounce-leave-active']" @tap.stop>
			<view class="close" v-if="showClose" @tap="close">
				<view class="iconfont icon-guanbi"></view>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CustomDialog',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		width: {
			type: String,
			default: 'auto'
		},
		height: {
			type: String,
			default: 'auto'
		},
		radius: {
			type: String,
			default: '16rpx'
		},
		bgColor: {
			type: String,
			default: '#fff'
		},
		customStyle: {
			type: Object,
			default: () => ({})
		},
		/* 是否展示右上角关闭按钮 */
		showClose: {
			type: Boolean,
			default: true
		},
		/* 是否点击遮罩层可以关闭弹出框 */
		maskCloseAble: {
			type: Boolean,
			default: true
		},
		/* 弹出框层级 */
		zIndex: {
			type: Number,
			default: 999
		}
	},
	data() {
		return {
			dialogVisible: this.visible,
			showAnimate: this.visible,
			timer: null
		};
	},
	beforeDestroy() {
		this.clearTimeout();
	},
	watch: {
		visible: {
			handler(val) {
				setTimeout(() => {
					this.dialogVisible = val;
					this.showAnimate = val;
				}, 50);
			},
			immediate: true
		}
	},
	computed: {
		getStyle() {
			return {
				width: this.width,
				height: this.height,
				background: this.bgColor,
				borderRadius: this.radius,
				...this.customStyle
			};
		}
	},
	methods: {
		clearTimeout() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},

		closeMask() {
			if (!this.maskCloseAble) return;
			this.close();
		},

		close() {
			this.closeAnimate();
			this.timer = setTimeout(() => {
				this.$emit('close');
				this.$emit('update:visible', false);
			}, 500);
		},

		closeAnimate() {
			this.showAnimate = false;
			this.clearTimeout();
		}
	}
};
</script>

<style lang="scss" scoped>
.dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(#000, 0.3);
}

.dialog {
	position: relative;
	border-radius: 16px;
	padding: 20rpx;
	padding-bottom: 14rpx;
	margin-left: -50rpx;
	opacity: 0;

	.close {
		position: absolute;
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		background-color: rgba(#000, 0.6);
		top: -10rpx;
		right: -10rpx;

		.icon {
			width: 10rpx;
			height: 10rpx;
		}
	}
}

/*  打开与关闭的类名 */
.bounce-enter-active {
	animation: bounceIn 0.5s both;
}
.bounce-leave-active {
	animation: bounceOut 0.5s both;
}

/* 定义bounceIn动画 */
@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
	70% {
		opacity: 1;
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
/* 定义 bounceOut 动画 */
@keyframes bounceOut {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	25% {
		opacity: 1;
		transform: scale(0.95);
	}
	50% {
		opacity: 0;
		transform: scale(1.1);
	}
	100% {
		opacity: 0;
		transform: scale(0);
	}
}

.icon-guanbi {
	color: #94ffd8;
	font-size: 16rpx;
}
</style>

使用：

<template>
	<view class="index">
		<button @click="visible = true">click</button>

		<custom-dialog :visible.sync="visible" width="500rpx" height="240rpx" @close="close">
			<view class="content">hello,hello</view>
		</custom-dialog>
	</view>
</template>

<script>
import CustomDialog from '@/components/CustomDialog/index.vue';
export default {
	components: {
		CustomDialog
	},
	data() {
		return {
			visible: false
		};
	},
	methods: {
		close() {
			console.log('我可以做点什么');
		}
	}
};
</script>

<style lang="scss" scoped>
.index {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>

若是想根据内容大小来撑开宽度高度的话，那就不用设置width 和 height；

喜欢的可以用了！