微信小程序封装组件居然如此简单

需求出现了对小程序项目弹框进行自定义按钮和标题的自定义，于是直接封装成可复用的组件，效果如图：

组件代码 logs.wxml

<!--logs.wxml-->
<view class="model_mask" hidden="{{!isShow}}"></view>
<view class="model_content" hidden="{{!isShow}}">
  <!-- 插槽 -->
  <view class="model_title">{{titleText}}</view>
  <view class="model_main"> 
    <slot class="slotSty"></slot>
  </view>
  <view class="model_btm">
    <!-- catchtap监听到点击->触发自身的bindeConfirm事件 -->
    <view hidden="{{!showConfirm}}" catchtap="bindConfirm" style="color: {{showConfirmColor}};"  >{{confirmText}}</view>
    <view hidden="{{!showCancel}}" catchtap="bindCancel" style="color: {{showCancelColor}};">{{cancelText}}</view>
  </view> 
</view>    

logs.wxss

.model_mask{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;
  opacity: 0.5;
}
.model_content{ 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600rpx;
  height: 600rpx;
  background: #fff;
  border-radius: 16rpx;
  transform: translate(-50%, -50%);
}
.model_title{
  text-align: center;
  color: gray;
  padding: 20rpx 0;
}
.model_btm{
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  display: flex;
  height: 96rpx;
  line-height: 96rpx;
  border-top: 2rpx solid #F1F1F1;
  text-align: center;
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}
.model_btm view{
  flex: 1;
} 
.model_main{
  padding: 35rpx;
  line-height: 48rpx;
  font-size: 28rpx;
  padding: 0;
  margin: 8rpx 16rpx 0;
  color: #1F2329;
}

logs.js

Component({

  behaviors: [],

  // 属性定义（详情参见下文）
  properties: {
    isShow: { //控制整个蒙版显示
      type: Boolean,
      value: true
    },
    confirmText:{
      type:String,
      value:'确认',
    },
    cancelText:{
      type:String,
      value:'取消',
    },
    titleText:{
      type:String,
      value:'提示',
    },
    showConfirm:{//控制确定按钮显示
      type:Boolean,
      value:true,
    },
    showCancel:{//控制取消按钮显示
      type:Boolean,
      value:true,
    },
    showConfirmColor:'black',
    showCancelColor:'black',
  },
  methods: {
    bindConfirm:function(){//点击确认按钮<1.触发实例确认事件>并<2.隐藏弹框>
      this.triggerEvent('confirm' , null);//触发实例上监听的事件confirm，在index.js中的事件
      this.setData({
        isShow:false,
      });
    },
    bindCancel:function(){//点击取消按钮<1.触发实例取消事件>并<2.隐藏弹框>
      this.triggerEvent('cancel' , null);
      this.setData({
        isShow:false,
      });
    },
  }
})

组件空框架显示如图，通过引入组件传值实现各种标题样式和按钮样式的显示控制， 同时中间通过slot进行插槽传值信息

以上就是整个封装的弹框组件代码，接下来在页面中当成组件在index.json进行引入

{
  "usingComponents": {
    "component":"/pages/logs/logs"
  }
}

index.wxml

<component
  showConfirm="{{true}}" 
  showCancel="{{true}}"
  titleText="提示内容"
  cancelText="再想想"  
  confirmText="确定下单"
  showCancelColor="#1F2329"
  showConfirmColor="#58B392"
  bind:cancel="toCancel"
  bind:confirm="toConfirm"
>
<view>1、如已报名该项管服务，退款后仍可能需要补缴费用，具体请以学校通知为准</view> 
</component>  

index.js

// 获取应用实例
const app = getApp()
Page({
  data: {
    showConfirm:false,//控制确定按钮显示
    showCancel:false,//控制取消按钮显示
  },
  toConfirm(){
    console.log(111)
  },
  toCancel(){
    console.log(222)
  }

在页面中应用显示效果