提交 c41fc28f 编写于 作者: X xiaoyucoding

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

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