微信小程序全局自定义弹窗

全局自定义弹窗

微信小程序原有弹窗不满足业务，因此封装一个自定义弹窗

创建自定义组件

创建components-model组件，生成wxml,js,json,scss文件

<!--components/model.wxml-->
<!--
  title 标题
  content 内容
  showCancel 是否显示取消按钮
  cancelText 取消按钮文案
  confirmText： 确认按钮文案
-->
<view class="modal" wx:if="{{ isShow }}" >
    <view class="m-body">
      <view class="m-cont" style="{{customStyle}}">
        <view class="title">{{ title }}</view>
        <text class="text {{ textAlign }}">{{ content }}</text>
        <view class="m-btn" wx:if="{{ showCancel }}">
          <view class="btn btn-1" bind:tap="_cancel">{{ cancelText }}</view>
          <view class="btn btn-2" bind:tap="_confirm">{{ confirmText }}</view>
        </view>
        <view class="m-btn" wx:if="{{ !showCancel }}">
          <view class="btn btn-2 btn-3" bind:tap="_confirm">{{ confirmText }}</view>
        </view>
      </view>
    </view>
</view>

// components/model.ts
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value:'',
    },
    content: {
      type: String,
      value: ''
    },
    showCancel: {
      type: Boolean,
      value: true
    },
    textAlign: {
      type: String,
      value: 'center'
    },
    cancelText: {
      type: String,
      value: '取消'
    },
    confirmText: {
      type: String,
      value: '确定'
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    isShow:true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 确认
    _confirm (e) {
      // 触发组件事件，传递数据
      this.triggerEvent("onConfirm");
      this.triggerEvent("onCancel",false);
    },
    // 取消
    _cancel() {
      this.setData({
        isShow:false
      })
      this.triggerEvent("onCancel",this.data.isShow);
    }
  }
})

/* components/model.wxss */
.modal{
  
  .m-body {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(51,51,51,0.6);
    z-index: 992;
    .m-cont{
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 526rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      padding: 32rpx;
      z-index: 999;
      .title {
        height: 44rpx;
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        line-height: 44rpx;
        margin-bottom: 16rpx;
        text-align: center;
      }
      .text{
        display: block;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
        margin-bottom: 40rpx;
        
      }
      .center {
        text-align: center;
      }
      .left {
        text-align: left;
      }
      .rgiht {
        text-align: right;
      }
      .m-btn {
        display: flex;
        justify-content: space-between;
        .btn {
          width: 248rpx;
          height: 80rpx;
          line-height: 76rpx;
          border-radius: 40rpx;
          font-size: 28rpx;
          text-align: center;
          box-sizing: border-box;
        }
        .btn-1 {
          border: 2rpx solid #CCCCCC;
          color: #818181;
        }
        .btn-2 {
          font-weight: 600;
          color: #333333;
          background: linear-gradient(180deg, #FFDF0F 0%, #FFF336 100%);
        }
        .btn-3{
          width: 100%;
        }
      }
    }
  }
}

注入model组件

小程序app.json,引入组件

"usingComponents": {
    "model": "/components/model/index"
  },

页面使用

// data 数据
 model: {
      title: '温馨提示',
      content: '内容',
      confirmText: '确定',
      cancelText:'取消',
      isShowModel: false
    },
<model wx:if="{{ model.isShowModel }}" content="{{ model.content }}" title="{{ model.title }}" confirmText="{{ model.confirmText }}"bind:onConfirm="onConfirm" bind:onCancel="onCancel"></model>

总结

比较简单的自定义弹窗，没有加显示隐藏的动画效果，页面多次调用先把内容重置