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

喜欢的可以用了!

 

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

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

相关文章

vxe-弹窗初始化激活选中Vxe-Table表格中第一行input输入框

1.实现效果 2.Modal弹窗的渲染过程 一、Vue组件的生命周期 Vue组件从创建到销毁会经历一系列的生命周期钩子&#xff0c;这些钩子为开发者提供了在不同阶段插入自定义逻辑的机会。在Modal弹窗的上下文中&#xff0c;这些生命周期钩子同样适用。 beforeCreate&#xff1a;组件…

Qt中的高分辨率及缩放处理

写在前面 使用Qt开发界面客户端&#xff0c;需要考虑不同分辨率及缩放对UI界面的影响&#xff0c;否则会影响整体的交互使用。 问题 高分辨率/缩放设备上图片/图标模糊 若不考虑高分辨及缩放处理&#xff0c;在高分辨率/缩放设备上&#xff0c;软件中的图片、图标可能会出现…

解决jupyter argparse报错

jupyter argparse报错 文章目录 一、jupyter argparse报错 一、jupyter argparse报错 args parser.parse_args()这行代码改为&#xff1a; args parser.parse_args(args[])完整的代码为&#xff1a; import argparseparser argparse.ArgumentParser() parser.add_argumen…

sourcetree中常用功能使用方法及gitlab冲突解决

添加至缓存&#xff1a;等于git add 提交&#xff1a;等于git commit 拉取/获取&#xff1a;等于git pull ,在每次要新增代码或者提交代码前需要先拉取一遍服务器中最新的代码&#xff0c;防止服务器有其他人更新了代码&#xff0c;但我们自己本地的代码在我们更新前跟服务器不…

Java实战中如何使用多线程(线程池)及其为什么使用?

这个话题在入行之前就想过很多次&#xff0c;很多8古文或者你搜索的结果都是告诉你什么提高高并发或者是一些很高大上的话&#xff0c;既没有案例也没有什么公式去证明&#xff0c;但是面试中总是被问到&#xff0c;也没有实战经历&#xff0c;所以面试时一问到多线程的东西就无…

深度学习入门——与学习相关的技巧

前言 本章将介绍神经网络的学习中的一些重要观点&#xff0c;主题涉及寻找最优权重参数的最优化方法、权重参数的初始值、超参数的设定方法等 此外&#xff0c;为了应对过拟合&#xff0c;本章还将介绍权值衰减、Dropout等正则化方法&#xff0c;并进行实现。 最后将对近年来…

细说MCU用单路DAC模块设计和输出锯齿波的实现方法

目录 一、STM32G474RE的DAC模块 二、配置 1.配置DAC 2.选择时钟源和Debug 3.配置系统时钟 三、代码修改 1.启动DAC 2.给DAC的数据输出寄存器赋值 3.运行并观察输出 一、STM32G474RE的DAC模块 有些MCU本身就带有数/模转换器(Digital to Analog Converter,DAC)模块&am…

昇思25天学习打卡营第20天|Diffusion扩散模型

Mindspore框架利用扩散模型DDPM生成高分辨率图像&#xff08;生成高保真图像项目实践&#xff09; Mindspore框架利用扩散模型DDPM生成高分辨率图像|&#xff08;一&#xff09;关于denoising diffusion probabilistic model &#xff08;DDPM&#xff09;模型Mindspore框架利…

差分进化算法原理及其MATLAB/Python代码

1.算法简介 引用自&#xff1a;Storn R, Price K. Differential evolution–a simple and efficient heuristic for global optimization over continuous spaces[J]. Journal of global optimization, 1997, 11: 341-359. 今天给大家带来的是一个非常经典的智能优化算法–差分…

【多模态】42、LLaVA-UHD | 支持任意纵横比和大分辨率图像输入的 LLaVA

论文&#xff1a;LLaVA-UHD: an LMM Perceiving Any Aspect Ratio and High-Resolution Images 代码&#xff1a;https://github.com/thunlp/LLaVA-UHD 出处&#xff1a;清华 | 新加坡国立大学 | 中国科学院大学 一、背景 现有的很多 LMM 都是将图像处理成固定的纵横比&…

Ubuntu编译ffmpeg并添加cmake工程

文章目录 前言前提须知为什么要自己编译 FFmpeg前提软件包与工具的安装编译ffmpeg写CMakeList.txt包含ffmpeg到我们项目中 总结 前言 FFmpeg 是一个领先的多媒体框架&#xff0c;能够解码、编码、转码、复用、解复用、流化、过滤和播放几乎所有人类和机器创造的内容。FFmpeg 包…

设计模式11-原型模式

设计模式11-原型模式 写在前面对象创建模式典型模式原型模式动机结构代码推导应用特点要点总结 原型模式与工厂方法模式对比工厂方法模式原型模式什么时候用什么模式 写在前面 对象创建模式 通过对象创建模式绕开动态内存分配来避免创建过程中所导致的耦合过紧的问题。从而支…

数学建模--国赛备赛---TOPSIS算法

目录 1.准备部分 1.1提交材料 1.2MD5码相关要求 2.TOPSIS算法 2.1算法概述 2.2基本概念 2.3算法核心思想 2.4拓展思考 3.适用赛题 3.1适用赛题说明 3.2适用赛题举例 4.赛题分析 4.1指标的分类 4.2数据预处理 4.2.1区间型属性的变换 4.2.2向量规范化 4.3数据加…

基于 Three.js 的 3D 模型加载优化

作者&#xff1a;来自 vivo 互联网前端团队- Su Ning 作为一个3D的项目&#xff0c;从用户打开页面到最终模型的渲染需要经过多个流程&#xff0c;加载的时间也会比普通的H5项目要更长一些&#xff0c;从而造成大量的用户流失。为了提升首屏加载的转化率&#xff0c;需要尽可能…

IDEA的断点调试(Debug)

《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试&#xff08;Debug&#xff09; 第七章 …

【内网安全】横向移动-Kerberos-SPN-WinRM-RDP

目录 环境介绍与横向移动前置域横向移动-WinRM-WinRS移动条件&#xff1a; 步骤0、攻击机开启winrm服务&#xff1a;1.CS探针5985端口&#xff1a;2.连接目标主机并执行命令&#xff1a;3.上线CS&MSF:4.CS内置横向移动-winrm 域横向移动-RDP简介与条件RDP横向移动连接的三种…

TCP状态转换详解

1.什么是TCP的状态转换 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输层协议。在 TCP 连接的生命周期中&#xff0c;连接的状态会随着不同阶段的通信而发生变化&#xff0c;这些变化被称为状…

嵌入式Linux入门知识点汇总-启动过程、设备树、设备框架、锁

目录 1.BootLoader启动过程? 引导加载程序(Bootloader) 补充u-boot的理解 通用的bootloader 2.系统调用过程? 3.设备驱动模型的三个重要成员? 4.驱动和设备注册是否存在先后顺序? 5.framebuffer机制? 6.字符设备和块设备的区别并分别举例? 1.字符设备 2.块设备…

SVN 服务 安装部署 Docker(compose) 方式

通过 dockerhub 或者 命令行运行 &#xff1a; docker search svn 查看 svn 的镜像 如命令行&#xff1a; [rootSGP ~]# docker search svn NAME DESCRIPTION STARS OFFICIAL AUTOMATED garethflower…

景联文科技构建高质量心理学系知识图谱,助力大模型成为心理学科专家

心理大模型正处于快速发展阶段&#xff0c;在临床应用、教育、研究等多个领域展现出巨大潜力。 心理学系知识图谱能够丰富心理大模型的认知能力&#xff0c;使其在处理心理学相关问题时更加精确、可靠和有洞察力。这对于提高心理健康服务的质量和效率、促进科学研究以及优化教育…