微信小程序自定义组件：弹框

1，新建componets文件夹，popup文件夹中4个文件

//1, index.wxml
<view class="wx-popup" wx:if="{{flag}}">
  <view class='popup-container'>
    <view class="wx-popup-title">{{title}}</view>
    <view class="wx-popup-con">{{content}}</view>
    <view class="wx-popup-btn">
      <text class="btn-no" bindtap='_cancel'>{{btn_cancel_text}}</text>
      <text class="btn-ok" bindtap='_sure'>{{btn_sure_text}}</text>
    </view>
  </view>
</view>

//2,index.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  //组件的属性列表
  properties: {
    title: {            
      type: String,      
      value: '标题'     
    },
    content: {
      type: String,
      value: '内容'
    },
    btn_sure_text: {
      type: String,
      value: '确定'
    },
    btn_cancel_text: {
      type: String,
      value: '取消'
    } 
  },
//组件的初始数据
  data: {
    flag: false,
  },
//组件的方法列表
  methods: {
   hidePopup: function () {
      this.setData({
        flag: false
      })
    },
    showPopup () {
      this.setData({
        flag: true
      })
    },

    // 内部私有方法建议以下划线开头,triggerEvent 用于触发事件
     //触发取消回调
    _cancel() {
     this.triggerEvent("cancel")
    },
    _sure() {
      this.triggerEvent("sure");
    }
  }
})

//3,index.wxss
/* pages/modal/index.wxss */
.wx-popup {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}
 
.popup-container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  max-width: 600rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: bordre-box;
  transform: translate(-50%, -50%); 
  overflow: hidden;
  background: #fff;
}
 
.wx-popup-title {
  width: 540rpx;
  margin: 0 30rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 40rpx;
  border-bottom: 1rpx solid #bfbfbf;
}
 
.wx-popup-con {
  margin: 20rpx 30rpx;
}
 
.wx-popup-btn {
  display: flex;
  justify-content: space-around;
  border-top: 1rpx solid #bfbfbf;
}
 
.wx-popup-btn text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100rpx;
  font-size: 34rpx;
}
.wx-popup-btn text:nth-of-type(1){
  border-right: 1rpx solid #bfbfbf;
  color: grey;
}
.wx-popup-btn text:nth-of-type(2){
  color: red;
}

//4,index.json

2，在modal中使用popup组件

//1,index.json引入
{
  "navigationBarTitleText": "弹框",
  "usingComponents": {
    "popup": "/components/popup/index"
  }
 }
//2,index.wxml
<view>
  <button bindtap="showPopup" type='primary'> 点我 </button>
  <!-- 自定义弹框组件 -->
  <popup class='popup' 
      title='组件标题' 
      content='百度百科是百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线，几乎涵盖了所有已知的知识领域。' 
      btn_cancel_text='立即取消' 
      btn_sure_text='确定'
      bind:cancel="handleCancelBtnClick"  
      bind:sure="handleSureBtnClick">
  </popup>
</view>

//3,index.js
const app = getApp()
 
Page({
  onReady: function () {
    //获得popup组件
    this.popup = this.selectComponent(".popup");
  },
 
  showPopup() {
    this.popup.showPopup();
  },
 
  //取消事件
  handleCancelBtnClick() {
    console.log('你点击了取消');
    this.popup.hidePopup();
  },
  //确认事件
  handleSureBtnClick() {
    console.log('你点击了确定');
    this.popup.hidePopup();
  }
})