小程序-自定义模态框弹框

小程序有官方的 wx.showModal（）方法来定义弹窗内容，但是弹窗显示只能定义文本。可参考官方文档。

自定义图片弹窗：

    <!--弹窗的页面-->
    <div class="modalMask" v-if="isModel"></div>
    <div class="modalDialog" v-if="changeModel">
      <div class="modalContent">
        <p class="contentTip">
          <image class="guide_img" src="/static/images/guide.jpg"></image>
        </p>
      </div>
      <div class="modalFooter">
        <div class="btnConfirm" @tap="confirmSend">确定</div>
      </div>
    </div>

 

<span
      class="flex-sub icon-info padding-left-sm blue text-xl position-rel"
      :style="{ top:isIphone?'-14rpx':'-4rpx'}"
      @click="gotoGuide"
></span>

data(){

    return{
      changeModel: false,
      isModel: false,
      
   }
}

methods:{
    gotoGuide() {
      this.changeModel = !this.changeModel;
      this.isModel = !this.isModel;
    },
    //  确认
    confirmSend() {
      console.log("确认");
      this.changeModel = !this.changeModel;
      this.isModel = !this.isModel;
    }
    
}

css

/* 引导页弹窗样式 */
.modalMask {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background: #000;
   opacity: 0.5;
   overflow: hidden;
   z-index: 9000;
   color: #fff;
 }
 .modalDialog {
   box-sizing: border-box;
   width: 640rpx;
   overflow: hidden;
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 9999;
   background: #fff;
   margin: -460rpx -320rpx;
   border-radius: 8rpx;
 }
 .modalContent {
   box-sizing: border-box;
   display: flex;
   padding: 50rpx 53rpx;
   font-size: 32rpx;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 }
 .contentTip {
   text-align: center;
   font-size: 36rpx;
   color: #333333;
 }
 .teleStyle {
   background: #ffffff;
   border: 1px solid #979797;
   border-radius: 6rpx;
   line-height: 50rpx;
   height: 50rpx;
   box-sizing: border-box;
   padding-left: 12rpx;
   width: 460rpx;
   font-size: 28rpx;
   /*color: rgba(0,0,0,0.25);*/
   margin-top: 30px;
 }
 .modalFooter {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   height: 100rpx;
   border-top: 1px solid #e5e5e5;
   font-size: 32rpx;
   line-height: 100rpx;
 }

 .btnConfirm {
   font-size: 32rpx;
   width: 100%;
   color: #508cee;
   text-align: center;
 }
.guide_img{
  margin: 0 auto;
  width: 640rpx;
  height: 768rpx;
}

 

参考文章地址：https://blog.csdn.net/weixin_37787674/article/details/89674609