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

  1 <template>
  2   <div>
  3     <a @click="isShow">half-screen-dialoga>
  4     
  5     
  6     <div v-if="show">
  7       <div class="weui-mask"
  8            @click="isShow">
  9       div>
 10       <div class="weui-half-screen-dialog">
 11         <div class="weui-half-screen-dialog__hd">
 12           <div class="weui-half-screen-dialog__hd__main">
 13             <strong class="weui-half-screen-dialog__title_center">标题strong>
 14           div>
 15         div>
 16         <div class="weui-half-screen-dialog__bd">
 17           可放自定义内容
 18         div>
 19       div>
 20     div>
 21     
 22   div>
 23 template>
 24 
 25 <script>
 26 import '../../../static/weui/weui.css'
 27 export default {
 28   data () {
 29     return {
 30       show: true,
 31       animationData: {}
 32     }
 33   },
 34   methods: {
 35     isShow () {
 36       this.show = !this.show
 37     }
 38   }
 39 }
 40 script>
 41 
 42 <style scoped>
 43 .weui-mask {
 44   position: fixed;
 45   z-index: 1000;
 46   top: 0;
 47   right: 0;
 48   left: 0;
 49   bottom: 0;
 50   background: rgba(0, 0, 0, 0.6);
 51 }
 52 
 53 /* Half Screen Dialog Styles*/
 54 .weui-half-screen-dialog {
 55   position: fixed;
 56   left: 0;
 57   right: 0;
 58   bottom: 0;
 59   height: 35%;
 60   max-height: 75%;
 61   z-index: 5000;
 62   line-height: 1.4;
 63   background-color: #ffffff;
 64   border-top-left-radius: 12px;
 65   border-top-right-radius: 12px;
 66   overflow: hidden;
 67   padding: 0 calc(24px + constant(safe-area-inset-right))
 68     constant(safe-area-inset-bottom) calc(24px + constant(safe-area-inset-left));
 69   padding: 0 calc(24px + env(safe-area-inset-right)) env(safe-area-inset-bottom)
 70     calc(24px + env(safe-area-inset-left));
 71 }
 72 .weui-half-screen-dialog__hd {
 73   font-size: 8px;
 74   height: 8em;
 75   display: -webkit-box;
 76   display: -webkit-flex;
 77   display: flex;
 78   -webkit-box-align: center;
 79   -webkit-align-items: center;
 80   align-items: center;
 81 }
 82 .weui-half-screen-dialog__hd .weui-icon-btn {
 83   position: absolute;
 84   top: 50%;
 85   -webkit-transform: translateY(-50%);
 86   transform: translateY(-50%);
 87 }
 88 .weui-half-screen-dialog__hd__side {
 89   position: relative;
 90 }
 91 .weui-half-screen-dialog__hd__main {
 92   -webkit-box-flex: 1;
 93   -webkit-flex: 1;
 94   flex: 1;
 95 }
 96 .weui-half-screen-dialog__hd__side + .weui-half-screen-dialog__hd__main {
 97   text-align: center;
 98   padding: 0 40px;
 99 }
100 .weui-half-screen-dialog__hd__main
101   + .weui-half-screen-dialog__hd__side
102   .weui-icon-btn {
103   right: 0;
104 }
105 .weui-half-screen-dialog__title {
106   display: block;
107   color: rgba(0, 0, 0, 0.9);
108   font-weight: 700;
109   font-size: 15px;
110 }
111 .weui-half-screen-dialog__title_center {
112   display: block;
113   color: rgba(0, 0, 0, 0.9);
114   font-weight: 700;
115   font-size: 15px;
116   text-align: center;
117 }
118 .weui-half-screen-dialog__subtitle {
119   display: block;
120   color: rgba(0, 0, 0, 0.5);
121   font-size: 10px;
122 }
123 .weui-half-screen-dialog__bd {
124   word-wrap: break-word;
125   -webkit-hyphens: auto;
126   hyphens: auto;
127   overflow-y: auto;
128 }
129 .weui-half-screen-dialog__desc {
130   padding-top: 4px;
131   font-size: 17px;
132   color: rgba(0, 0, 0, 0.9);
133   line-height: 1.4;
134 }
135 .weui-half-screen-dialog__tips {
136   padding-top: 16px;
137   font-size: 14px;
138   color: rgba(0, 0, 0, 0.3);
139   line-height: 1.4;
140 }
141 .weui-half-screen-dialog__ft {
142   padding: 40px 24px 32px;
143   text-align: center;
144 }
145 .weui-half-screen-dialog__ft .weui-btn {
146   display: inline-block;
147   vertical-align: top;
148   margin: 0 8px;
149   width: 120px;
150 }
151 style>

效果如下：