记录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;

喜欢的可以用了!

 

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-22 04:10:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-22 04:10:02       102 阅读
  3. 在Django里面运行非项目文件

    2024-07-22 04:10:02       83 阅读
  4. Python语言-面向对象

    2024-07-22 04:10:02       92 阅读

热门阅读

  1. MLIR

    2024-07-22 04:10:02       21 阅读
  2. 周六算法加练

    2024-07-22 04:10:02       25 阅读
  3. qt 数字转字符

    2024-07-22 04:10:02       25 阅读
  4. qt log 输出为文件

    2024-07-22 04:10:02       23 阅读
  5. 谈谈如何快速学习一门技术

    2024-07-22 04:10:02       24 阅读
  6. WebGIS面试题(第八期)

    2024-07-22 04:10:02       21 阅读
  7. 算法的概述

    2024-07-22 04:10:02       20 阅读
  8. 2024年水利水电安全员考试题库及答案

    2024-07-22 04:10:02       24 阅读
  9. c语言(7.21)

    2024-07-22 04:10:02       23 阅读
  10. 原型继承和原型链

    2024-07-22 04:10:02       24 阅读