<template>
<div>
<a @click="isShow">half-screen-dialog</a>
<!--BEGIN half-screen-dialog-->
<!-- mpvue微信小程序不支持vue中的transition -->
<div v-if="show">
<div class="weui-mask"
@click="isShow">
</div>
<div class="weui-half-screen-dialog">
<div class="weui-half-screen-dialog__hd">
<div class="weui-half-screen-dialog__hd__main">
<strong class="weui-half-screen-dialog__title_center">标题</strong>
</div>
</div>
<div class="weui-half-screen-dialog__bd">
可放自定义内容
</div>
</div>
</div>
<!--END half-screen-dialog-->
</div>
</template> <script>
import '../../../static/weui/weui.css'
export default {
data () {
return {
show: true,
animationData: {}
}
},
methods: {
isShow () {
this.show = !this.show
}
}
}
</script> <style scoped>
.weui-mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
} /* Half Screen Dialog Styles*/
.weui-half-screen-dialog {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 35%;
max-height: 75%;
z-index: 5000;
line-height: 1.4;
background-color: #ffffff;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
padding: 0 calc(24px + constant(safe-area-inset-right))
constant(safe-area-inset-bottom) calc(24px + constant(safe-area-inset-left));
padding: 0 calc(24px + env(safe-area-inset-right)) env(safe-area-inset-bottom)
calc(24px + env(safe-area-inset-left));
}
.weui-half-screen-dialog__hd {
font-size: 8px;
height: 8em;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.weui-half-screen-dialog__hd .weui-icon-btn {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.weui-half-screen-dialog__hd__side {
position: relative;
}
.weui-half-screen-dialog__hd__main {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.weui-half-screen-dialog__hd__side + .weui-half-screen-dialog__hd__main {
text-align: center;
padding: 0 40px;
}
.weui-half-screen-dialog__hd__main
+ .weui-half-screen-dialog__hd__side
.weui-icon-btn {
right: 0;
}
.weui-half-screen-dialog__title {
display: block;
color: rgba(0, 0, 0, 0.9);
font-weight: 700;
font-size: 15px;
}
.weui-half-screen-dialog__title_center {
display: block;
color: rgba(0, 0, 0, 0.9);
font-weight: 700;
font-size: 15px;
text-align: center;
}
.weui-half-screen-dialog__subtitle {
display: block;
color: rgba(0, 0, 0, 0.5);
font-size: 10px;
}
.weui-half-screen-dialog__bd {
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
overflow-y: auto;
}
.weui-half-screen-dialog__desc {
padding-top: 4px;
font-size: 17px;
color: rgba(0, 0, 0, 0.9);
line-height: 1.4;
}
.weui-half-screen-dialog__tips {
padding-top: 16px;
font-size: 14px;
color: rgba(0, 0, 0, 0.3);
line-height: 1.4;
}
.weui-half-screen-dialog__ft {
padding: 40px 24px 32px;
text-align: center;
}
.weui-half-screen-dialog__ft .weui-btn {
display: inline-block;
vertical-align: top;
margin: 0 8px;
width: 120px;
}
</style>
效果如下：