mpvue 微信小程序半屏弹框（half-screen-dialog）

 <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>

效果如下：