<template>
<view class="box">
<!-- 组件内关闭 -->
<button type="default" @click="popBtn()" v-show="bodyBtn == true">底部弹出</button>
<!-- -->
<!-- 遮罩层 -->
<view class="mask" v-show="tag==true || Uptag == true" @click="close()"></view>
<!-- 插槽 -->
<slot></slot>
<!-- 弹窗 -->
<view class="window-top all-transition" :style="direction=='top' ? objDirection : ''" v-show="direction=='top'">
顶部弹出
</view>
<view class="window all-transition" :style="direction=='bottom' ? objDirection : ''" v-show="direction=='bottom'">
<view style="text-align: center;font-size: 35rpx;height: 90rpx;border-bottom: 1rpx solid #1B2126;line-height: 90rpx;">
底部弹出
</view>
<button type="default" class="bottom-btn" @tap="close">取消</button>
</view>
<view class="window-right all-transition" :style="direction=='right' ? objDirection : ''" v-show="direction=='right'">
右侧弹出
</view>
<view class="window-left all-transition" :style="direction=='left' ? objDirection : ''" v-show="direction=='left'">
左侧弹出
</view>
</view>
</template>
<script>
// 1.如果先要在组件内部控制显示与隐藏设置bodyBtn为true即可
// 2.
export default {
props: {
direction: String, //方向
Uptag: Boolean, //判断点击事件
bodyBtn: Boolean //组件内容控制显示隐藏
},
data() {
return {
tag: false //组件内关闭的变量
}
},
computed: {
//计算函数
objDirection() {
if (this.direction == 'bottom') {
if (this.tag||this.Uptag == true) {
return "transform: translateY(0);"
} else {
return "transform: translateY(100%);"
}
} else if (this.direction == 'right') {
if (this.tag||this.Uptag == true) {
return "transform: translateX(0);"
} else {
return "transform: translateX(100%);"
}
} else if (this.direction == 'left') {
if (this.tag||this.Uptag == true) {
return "transform: translateX(0);"
} else {
return "transform: translateX(-100%);"
}
} else if (this.direction == 'top') {
if (this.tag || this.Uptag == true) {
return "transform: translateY(0);"
} else {
return "transform: translateY(-100%);"
}
}
}
},
methods: {
popBtn() {
this.tag = !this.tag
},
//关闭事件
close() {
if (this.tag == true) this.tag = false //组件内关闭事件
this.$emit('close', false) //组件外关闭事件
}
}
}
</script>
<style>
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
z-index: 1;
}
.all-transition {
position: absolute;
transition: all 0.3s;
-moz-transition: all 0.3s; /* Firefox 4 */
-webkit-transition: all 0.3s; /* Safari and Chrome */
-o-transition: all 0.3s;
background-color: #FFFFFF;
z-index: 999;
}
.window {
bottom: 0;
left: 50%;
margin-left: -300rpx;
width: 600rpx;
height: 500rpx;
border-radius: 40rpx 40rpx 0 0;
}
.window-right {
/* 如果不想让右侧全屏占满,将top值删掉就可 */
top: 0;
right: 0;
width: 200rpx;
height: 100%;
border-radius: 15rpx 0 0 15rpx;
}
.window-left {
/* 如果不想让右侧全屏占满,将top值删掉就可 */
top: 0;
left: 0;
width: 200rpx;
height: 100%;
border-radius: 0 15rpx 15rpx 0;
}
.window-top {
left: 50%;
margin-left: -300rpx;
/* 如果不想让右侧全屏占满,将top值删掉就可 */
top: 0;
width: 600rpx;
height: 500rpx;
border-radius: 0 0 15rpx 15rpx;
}
.bottom-btn {
margin-top: 100rpx;
width: 200rpx;
height: 80rpx;
background-color: pink;
}
</style>
uniapp弹出窗口编写
这是一个Vue组件的代码示例,用于实现不同方向的动态弹出窗口。组件包含顶部、底部、左侧和右侧弹出效果,并支持组件内外控制关闭。通过`direction`属性设定弹出方向,`bodyBtn`和`Uptag`控制显示隐藏。点击按钮可以触发底部弹出,点击遮罩层或使用`close`方法可关闭弹窗。
摘要由CSDN通过智能技术生成