组件库的组件用着不习惯,自己写了个uniapp弹出框组件
分顶部,底部,右侧,左侧弹出
可在弹框中加样式
也可在组件内容使用按显示和关闭弹窗
只写了弹窗
<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>
使用
<template>
<view>
<button type="default" @click="show">点击弹出框</button>
<switchEdit :direction="direction" @close="Close" :Uptag="Uptag" :bodyBtn="true">
<!-- 插槽 -->
<view class="sitch-box" v-show="Uptag==true">
<view class="top">
</view>
<view class="bottom">
</view>
</view>
</switchEdit>
</view>
</template>
<script>
import switchEdit from '@/components/switch/switch.vue'
export default {
components: {
switchEdit
},
data() {
return {
//必写
//弹出方向
direction: 'bottom',
//弹出标志
Uptag: false
}
},
methods: {
//打开弹框
show() {
this.Uptag = !this.Uptag
},
//关闭按钮
Close(data) {
this.Uptag = data
}
}
}
</script>
<style>
button {
width: 300rpx;
height: 60rpx;
line-height: 60rpx;
font-size: 30rpx;
}
.sitch-box {
/* 为了控制位置 */
position: absolute;
top: 200rpx;
left: 50%;
margin-left: -250rpx;
width: 500rpx;
height: 200rpx;
background-color: #FFFFFF;
border-radius: 20rpx;
/* ,其中最主要的功能是层叠顺序 */
z-index: 999;
}
.top,
.bottom {
width: 100%;
height: 100rpx;
}
.top {
border-bottom: 1rpx solid #1B2126;
}
</style>