提交 5feeb33f 编写于 作者: 郭胜强

Merge branch 'master' of github.com:dcloudio/uni-app

<template>
<view>
<view class="uni-mask" v-show="show" :style="{top:titleHeight}" @click="hide"></view>
<view :class="['uni-popup','uni-popup-'+type]" v-show="show">
{{msg}}
<slot></slot>
</view>
</view>
</template>
<script>
export default {
props : {
show : {
type : Boolean,
default : false
},
type : {
type : String,
//top - 顶部, middle - 居中, bottom - 底部
default : 'middle'
},
msg :{
type : String,
default : ""
}
},
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-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-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>
<template>
<view class="content">
<view class="uni-h1">HI...</view>
<view class="uni-h2">HI...</view>
<view class="uni-h3">HI...</view>
<view class="uni-h4">HI...</view>
<view class="uni-h5">HI...</view>
<view class="uni-h6">HI...</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
};
}
}
</script>
<style>
.content {
flex: 1;
justify-content: center;
align-items: center;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style>
<template>
<view class="page">
<page-head :title="title"></page-head>
<view class="mask" v-show="showMask" :style="{top:titleHeight}" @click="hide"></view>
<view class="popup popup-middle" v-show="showState.middle">
<view class="desc">
<text>Hello</text>
</view>
</view>
<view class="popup popup-top" v-show="showState.top">
<text>顶部 popup</text>
</view>
<view class="popup popup-bottom" v-show="showState.bottom">
<text>底部 popup</text>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="button" @click="show">弹出 popup</button>
<button type="button" @click="show" data-position="top">顶部弹出 popup</button>
<button type="button" @click="show" data-position="bottom">底部弹出 popup</button>
<view class="uni-helllo-text uni-common-mt uni-center">
请点击下面的按钮进行体验
</view>
<!-- 居中 -->
<uni-popup :show="showPopupMiddle" :type="popType" v-on:hidePopup="hidePopup">
<view class="uni-center" style="font-size:0;">
<image class="image" style="width:150upx;" mode="widthFix" src="../../../static/uni@2x.png" />
</view>
<view class="uni-common-mt uni-helllo-text uni-center">
消息内容使用 slot 形式定义
</view>
</uni-popup>
<!-- 顶部 -->
<uni-popup :show="showPopupTop" :type="popType" :msg="msg" v-on:hidePopup="hidePopup"></uni-popup>
<!-- 底部 -->
<uni-popup :show="showPopupBottom" :type="popType" :msg="msg" v-on:hidePopup="hidePopup"></uni-popup>
<view class="uni-btn-v uni-common-mt">
<button type="button" @click="showMiddlePopup">居中弹出 popup</button>
<button type="button" @click="showTopPopup" data-position="top">顶部弹出 popup</button>
<button type="button" @click="showBottomPopup" data-position="bottom">底部弹出 popup</button>
</view>
</view>
</view>
</template>
<script>
import uniPopup from "../../../components/uni-popup.vue";
export default {
data() {
return {
title: 'popup',
showState: {
top: false,
middle: false,
bottom: false
},
showMask: false,
activePop: 'middle',
titleHeight: 0
popType : 'middle',
title : "popup",
showPopupMiddle : false,
showPopupTop : false,
showPopupBottom : false,
msg : ""
}
},
onBackPress() {
if (this.showMask) {
this.showMask = false;
this.hide();
return true;
}
},
created() {
//#ifdef H5
this.titleHeight = '44px'
//#endif
},
methods: {
show(evt) {
var pos = evt.target.dataset.position
switch (pos) {
case 'top':
this.activePop = 'top'
break
case 'bottom':
this.activePop = 'bottom'
break
default:
this.activePop = 'middle'
}
this.showMask = true
this.showState[this.activePop] = true
//统一的关闭popup方法
hidePopup : function(){
this.showPopupMiddle = false;
this.showPopupTop = false;
this.showPopupBottom = false;
},
//展示居中 popup
showMiddlePopup : function(){
this.hidePopup();
this.popType = "middle";
this.showPopupMiddle = true;
},
hide() {
this.showMask = false
this.showState[this.activePop] = false
//展示顶部 popup
showTopPopup: function(){
this.hidePopup();
this.popType = 'top';
this.msg = "顶部 popup 信息内容";
this.showPopupTop = true;
},
//展示底部 popup
showBottomPopup: function(){
this.hidePopup();
this.popType = 'top';
this.msg = "底部 popup 信息内容";
this.showPopupBottom = true;
}
},
components:{
uniPopup
}
}
</script>
<style>
.mask {
position: fixed;
z-index: 998;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .3);
}
.popup {
position: absolute;
z-index: 999;
background-color: #ffffff;
-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
}
.popup-middle {
width: 400upx;
height: 400upx;
border-radius: 10upx;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.popup-top {
top: 0;
width: 100%;
height: 100upx;
text-align: center;
}
.popup-top text {
line-height: 100upx;
margin-left: 20upx;
font-size: 32upx;
}
.popup-bottom {
bottom: 0;
width: 100%;
height: 100upx;
text-align: center;
}
.popup-bottom text {
line-height: 100upx;
font-size: 32upx;
}
.popup .list-view {
height: 600upx;
}
.list-view-item {
position: relative;
padding: 22upx 30upx;
overflow: hidden;
font-size: 28upx;
}
.list-view-item::after {
position: absolute;
right: 0;
bottom: 0;
left: 30upx;
height: 2upx;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.desc {
padding: 10upx 20upx;
font-size: 30upx;
line-height: 30upx;
margin-top: 150upx;
text-align: center;
}
</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.
先完成此消息的编辑!
想要评论请 注册