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

目录

前言：

正文：

---

前言：横屏的尺寸问题

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

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

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

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

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

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

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

<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；

喜欢的可以用了！