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

news2024/12/25 8:57:07

目录

前言:

正文:


前言:横屏的尺寸问题

        最近使用了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;

喜欢的可以用了!

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1939399.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

探索Python错误美化:pretty_errors库的魔法之旅

探索Python错误美化&#xff1a;pretty_errors库的魔法之旅 背景&#xff1a;为什么需要pretty_errors&#xff1f; 在Python编程中&#xff0c;错误和异常是不可避免的。然而&#xff0c;Python默认的错误信息往往不够直观&#xff0c;对于新手来说可能难以理解。pretty_erro…

MySQL学习之InnoDB引擎,索引

Mysql中的引擎 我们先来看一下MySql提供的有哪些引擎 mysql> show engines; 从上图我们可以查看出 MySQL 当前默认的存储引擎是InnoDB,并且在5.7版本所有的存储引擎中只有 InnoDB 是事务性存储引擎&#xff0c;也就是说只有 InnoDB 支持事务。 查看MySQL当前默认的存储引…

Transformer之Vision Transformer结构解读

论文地址 代码地址 写在前面 什么是Transformer呢&#xff1f;就是把符号向量化为Token&#xff0c; 再和位置编码求和或者做阿达玛积&#xff0c;最后送入一定层数的Attention Block构成的Encoder和Decoder&#xff0c;就完成了Transformer的基础功能。 那么&#xff0c;把上…

关于模的问题

写代码的时候遇到模的问题 class Solution:def countCompleteDayPairs(self, hours: List[int]) -> int:ans 0t [0 for _ in range(24)]for h in hours:u (24-h%24)%24ans t[u]t[h%24] 1return ans如果写成 u (24-h%24) 是不对的&#xff0c;没有考虑h等于0的情况

【多任务YOLO】 A-YOLOM: You Only Look at Once for Real-Time and Generic Multi-Task

You Only Look at Once for Real-Time and Generic Multi-Task 论文链接&#xff1a;http://arxiv.org/abs/2310.01641 代码链接&#xff1a;https://github.com/JiayuanWang-JW/YOLOv8-multi-task 一、摘要 高精度、轻量级和实时响应性是实现自动驾驶的三个基本要求。本研究…

51单片机(STC8H8K64U/STC8051U34K64)_RA8889驱动TFT大屏_I2C_HW参考代码(v1.3) 硬件I2C方式

本篇介绍单片机使用硬件I2C方式控制RA8889驱动彩屏。 提供STC8H8K64U和STC8051U34K64的参考代码。 【硬件部份】STC8H8K64U/STC8051U34K64 RA8889开发板 7寸TFT 800x480 1. 实物连接图&#xff1a;STC8H8K64URA8889开发板&#xff0c;使用P2口I2C接口&#xff1a; 2.实物连…

怎样制作高品质的电子画册,一看就会

随着数字化进程的加速&#xff0c;电子画册以其便捷的传播方式、丰富的展现形式&#xff0c;越来越受到各类人士的青睐。一份高品质的电子画册&#xff0c;不仅需要有吸引人的内容&#xff0c;更需要有专业的制作技巧。下面&#xff0c;就让我来为您详细解析&#xff0c;如何制…

量子计划 Quark 捯饬

1 蓝牙 系统镜像中具有内置的蓝牙驱动程序&#xff0c;可以按照以下步骤启动蓝牙&#xff1a; bluetoothctl# 进入 bluetoothctl 界面后。运行scan扫描列出附近所有的蓝牙设备 scan on# 复制设备的MAC地址&#xff0c;然后使用以下命令连接到设备&#xff1a; pair A4:xx:xx:…

艺术与技术的交响曲:CSS绘图的艺术与实践

在前端开发的世界里&#xff0c;CSS&#xff08;层叠样式表&#xff09;作为网页布局和样式的基石&#xff0c;其功能早已超越了简单的颜色和间距设置。近年来&#xff0c;随着CSS3的普及&#xff0c;开发者们开始探索CSS在图形绘制方面的潜力&#xff0c;用纯粹的代码创造出令…

32_ConvNeXt网络详解

1.1 简介 ConvNeXt是一种计算机视觉模型&#xff0c;由Meta AI&#xff08;前Facebook AI&#xff09;的研究人员在2022年提出&#xff0c;它旨在探索卷积神经网络&#xff08;CNN&#xff09;在图像识别任务上的潜力&#xff0c;尤其是在与当时流行的Vision Transformer&…

【windows】【系统还原】亦是美kms执行一键关闭defender 之后,windows defender 被卸载了,无论如何都打不开

在那之后&#xff0c;你是否一直无法启动 defender&#xff1f;&#xff1f;&#xff1f; 你是否一直担心电脑的安全问题&#xff1f;&#xff1f; 我也尝试了很多方法 无论是 powershell 执行 dism.exe /online /cleanup-image /scanhealth dism.exe /online /cleanup-ima…

【项目】星辰博客介绍

目录 一、项目背景 二、项目功能 1. 登录功能&#xff1a; 2. 列表页面&#xff1a; 3. 详情页面&#xff1a; 4. 写博客&#xff1a; 三、技术实现 四、功能页面展示 1. 用户登录 2. 博客列表页 3. 博客编辑更新页 4.博客发表页 5. 博客详情页 五.系统亮点 1.强…

c# 开发AutoCAD扩展

在C#中开发AutoCAD扩展涉及使用AutoCAD的.NET API&#xff0c; 利用AutoCAD的功能并创建自定义命令、对话框、块、图层和其他图形元素。以下是一些关键步骤和概念&#xff0c;可以帮助你开始使用C#开发AutoCAD扩展&#xff1a; 准备开发环境 安装AutoCAD&#xff1a;确保你有一…

图片转文档,和同行比我的优势在哪?

图片转Word/Excel | 极简AI工具箱&#xff0c;我自己做的这个在线工具。 图片转word&#xff0c;图片转excel这个功能&#xff0c;我认为还是有不小的需求的。百度上搜索&#xff0c;可以看到不少广告。说明有需求才会有这么多公司愿意花钱打广告。 我这里说的不是单纯的文字识…

CPU工作模式- 保护模式

保护模式 概述 随着软件的规模不断增加&#xff0c;需要更高的计算量、更大的内存容量内存一大&#xff0c;首先要解决的问题是寻址问题&#xff0c;因为16位的寄存器最好只能表示 2 16 2^{16} 216个地址&#xff0c;所以CPU的寄存器和运算单元都要扩展成32位虽然扩展CPU内部…

UDP详细总结

UDP协议特点 UDP是无连接的传输层协议&#xff1b; UDP使用尽最大努力交付&#xff0c;不保证可靠交付&#xff1b; UDP是面向报文的&#xff0c;对应用层交下来的报文&#xff0c;不合并&#xff0c;不拆分&#xff0c;保留原报文的边界&#xff1b; UDP没有拥塞控制&#…

ArrayList.subList的踩坑

需求描述&#xff1a;跳过list中的第一个元素&#xff0c;获取list中的其他元素 原始代码如下&#xff1a; List<FddxxEnterpriseVerify> companyList fddxxEnterpriseVerifyMapper.selectList(companyQueryWrapper);log.info("获取多个法大大公司数据量为&#…

【python 已解决】 ‘ValueError: invalid literal for int() with base 10’解决方案深度解析

【python 已解决】 ‘ValueError: invalid literal for int() with base 10’解决方案深度解析 在Python编程中&#xff0c;ValueError: invalid literal for int() with base 10是一个常见的错误&#xff0c;它通常表明在尝试将字符串转换为整数时&#xff0c;字符串中包含了无…

【开发踩坑】生僻字插入MySQL失败

背景 生产环境插入数据报错&#xff1a; java.sql.SQLException: Incorrect string value: \xF0\xAC\xB1\x96 for column answer at row 1设置answer字段值为 “&#x2cc56;”出现错误 生僻字设置出错&#xff1b; 排查 编码 查看库表属性&#xff1a; ENGINE InnoDB A…

【接口自动化_08课_Pytest+Yaml+Allure框架】

上节课一些内容 的补充 1、openxl这个方法&#xff0c;第一个元素是从1开始的&#xff0c;不是从0开始 回写的列在程序里写的是11&#xff0c;是因为是固定值 一、1. Yaml入门及应用 1、什么是yaml YAML&#xff08;/ˈjməl/&#xff0c;尾音类似camel骆驼&#xff09;是一…