提交 c41fc28f 编写于 作者: X xiaoyucoding

fix: 修复 popup 组件 top 值不正确的问题;修复 popup 底部示例参数不正确的问题。

上级 6340c16e
<template> <template>
<view> <view>
<view class="uni-mask" v-show="show" :style="{top:titleHeight}" @click="hide"></view> <view class="uni-mask" v-show="show" :style="{top:offsetTop + 'px'}" @click="hide"></view>
<view :class="['uni-popup','uni-popup-'+type]" v-show="show"> <view :class="['uni-popup','uni-popup-'+type]" v-show="show">
{{msg}} {{msg}}
<slot></slot> <slot></slot>
...@@ -9,75 +9,85 @@ ...@@ -9,75 +9,85 @@
</template> </template>
<script> <script>
export default { export default {
props : { props: {
show : { show: {
type : Boolean, type: Boolean,
default : false default: false
},
type: {
type: String,
//top - 顶部, middle - 居中, bottom - 底部
default: 'middle'
},
msg: {
type: String,
default: ""
}
}, },
type : { data() {
type : String, let offsetTop = 0;
//top - 顶部, middle - 居中, bottom - 底部 //#ifdef H5
default : 'middle' offsetTop = 44;
//#endif
return {
offsetTop: offsetTop
}
}, },
msg :{ methods: {
type : String, hide: function() {
default : "" this.$emit('hidePopup');
} }
},
methods:{
hide : function(){
this.$emit('hidePopup');
} }
} }
}
</script> </script>
<style> <style>
.uni-mask { .uni-mask {
position: fixed; position: fixed;
z-index: 998; z-index: 998;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: rgba(0, 0, 0, .3); background-color: rgba(0, 0, 0, .3);
} }
.uni-popup { .uni-popup {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0 0 30upx rgba(0, 0, 0, .1); box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
} }
.uni-popup-middle { .uni-popup-middle {
display:flex; display: flex;
flex-direction: column; flex-direction: column;
align-items:center; align-items: center;
width: 380upx; width: 380upx;
height: 380upx; height: 380upx;
border-radius: 10upx; border-radius: 10upx;
top:50%; top: 50%;
left:50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
justify-content:center; justify-content: center;
padding:30upx; padding: 30upx;
} }
.uni-popup-top { .uni-popup-top {
top: 0; top: 0;
left:0; left: 0;
width: 100%; width: 100%;
height: 100upx; height: 100upx;
line-height:100upx; line-height: 100upx;
text-align: center; text-align: center;
} }
.uni-popup-bottom {
left:0; .uni-popup-bottom {
bottom: 0; left: 0;
width: 100%; bottom: 0;
height: 100upx; width: 100%;
line-height:100upx; height: 100upx;
text-align: center; line-height: 100upx;
} text-align: center;
}
</style> </style>
...@@ -27,51 +27,51 @@ ...@@ -27,51 +27,51 @@
</view> </view>
</template> </template>
<script> <script>
import uniPopup from "../../../components/uni-popup.vue"; import uniPopup from '../../../components/uni-popup.vue';
export default { export default {
data() { data() {
return { return {
popType : 'middle', popType: 'middle',
title : "popup", title: 'popup',
showPopupMiddle : false, showPopupMiddle: false,
showPopupTop : false, showPopupTop: false,
showPopupBottom : false, showPopupBottom: false,
msg : "" msg: ''
} }
}, },
methods: { methods: {
//统一的关闭popup方法 //统一的关闭popup方法
hidePopup : function(){ hidePopup: function() {
this.showPopupMiddle = false; this.showPopupMiddle = false;
this.showPopupTop = false; this.showPopupTop = false;
this.showPopupBottom = false; this.showPopupBottom = false;
}, },
//展示居中 popup //展示居中 popup
showMiddlePopup : function(){ showMiddlePopup: function() {
this.hidePopup(); this.hidePopup();
this.popType = "middle"; this.popType = 'middle';
this.showPopupMiddle = true; this.showPopupMiddle = true;
}, },
//展示顶部 popup //展示顶部 popup
showTopPopup: function(){ showTopPopup: function() {
this.hidePopup(); this.hidePopup();
this.popType = 'top'; this.popType = 'top';
this.msg = "顶部 popup 信息内容"; this.msg = '顶部 popup 信息内容';
this.showPopupTop = true; this.showPopupTop = true;
}, },
//展示底部 popup //展示底部 popup
showBottomPopup: function(){ showBottomPopup: function() {
this.hidePopup(); this.hidePopup();
this.popType = 'top'; this.popType = 'bottom';
this.msg = "底部 popup 信息内容"; this.msg = '底部 popup 信息内容';
this.showPopupBottom = true; this.showPopupBottom = true;
} }
}, },
components:{ components: {
uniPopup uniPopup
} }
} }
</script> </script>
<style> <style>
</style> </style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册