96 lines
1.9 KiB
Vue
96 lines
1.9 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 弹窗 -->
|
|
<uni-popup ref="popup" type="center" border-radius="10px" background-color="rgba(0,0,0,0)">
|
|
<view class="topBtnBox">
|
|
<slot></slot>
|
|
</view>
|
|
<view class="topBtnBoxbottom" @click="close()">
|
|
<uni-icons type="clear" color="#AAA" size='40'></uni-icons>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<!-- 底部弹窗 -->
|
|
<uni-popup class="popup-bottom" ref="popupBottom" type="bottom" border-radius="10px"
|
|
background-color="rgba(0,0,0,0)">
|
|
<view class="popup-bottom-box">
|
|
<slot>
|
|
</slot>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
ref
|
|
} from 'vue';
|
|
export default {
|
|
name: "popup",
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
/**
|
|
* @param {Object} e
|
|
* bottom top lef right
|
|
* 打开弹窗
|
|
*/
|
|
open(e) {
|
|
switch (e) {
|
|
case "bottom":
|
|
this.$refs.popupBottom.open(e)
|
|
break;
|
|
default:
|
|
this.$refs.popup.open(e)
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* 关闭弹窗
|
|
*/
|
|
close() {
|
|
this.$refs.popup.close()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.popup-box {
|
|
padding: 32rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 32rpx;
|
|
}
|
|
|
|
.topBtnBox {
|
|
background-color: #fff;
|
|
width: 80vw;
|
|
padding: 32rpx;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.topBtnBoxbottom {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 36rpx;
|
|
}
|
|
|
|
.popup-bottom {
|
|
.popup-bottom-box {
|
|
width: 100%;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
background-color: #EDEDED;
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
</style> |