微信小程序弹框组件

在pages同层目录下创建一个componets如图

 

 

 在componets下创建一个文件夹

 

 

 对dialog文件夹右键使用新建componet（注Component 构造器可用于定义组件）

在dialog.json文件里

 

 

 component必须为ture，

以下是HTML

<view class="dialog-custom" wx:if="{{visible}}" >  //visible是判断是否显示或隐藏弹框
  <view class="dialog-mask" bindtap='clickMask'></view>   //此点单事件是判断是否点击到弹框外，是就很隐藏弹框
  <view class="dialog-main">
    <view class="dialog-container">
      <view class="dialog-container_title" wx:if="{{title.length>0}}"> //判断title长度是否大于0是就显示以下父级的子级，否则就不显示
        <view class="title-label">{{title}}</view>
        <view class="title-icon">
          <image wx:if="{{showClose}}" bindtap='close' src='{{img}}'></image>   //判断值是否有showclose,image路径无就隐藏
        </view>
      </view>
      <view class="dialog-container_body">
        <slot name='dialog-body'></slot>   //slot插槽文本，在B页面使用时，使用<view slot='dialog-body'></view>,还需在组件内的options里设置multipleSlots:true
      </view>
      <view class="dialog-container_footer" wx:if="{{showFooter}}"> //判断showFooter值是否为true是就显示包容的子级
        <view class="dialog-container_footer_cancel" bindtap='close'>取消</view>   //绑定事件
        <view class="dialog-container_footer_confirm" bindtap='confirm' style="color:{{color}}">确定</view> //绑定事件
      </view>
    </view>
  </view>
</view>

以下是wxSS

.dialog-custom {
width: 100vw;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 9999;
}
  .dialog-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
width: 100vw;
height: 100%;
background: rgba(0, 0, 0, 0.3);
  }
  .dialog-main {
position: fixed;
z-index: 10001;
top: 50%;
left: 0;
right: 0;
width: 85vw;
height: auto;
margin: auto;
transform: translateY(-50%);
  }
  .dialog-container {
margin: 0 auto;
background: #fff;
z-index: 10001;
border-radius: 3px;
box-sizing: border-box;
padding: 40rpx;
  }
  .dialog-container_title {
width: 100%;
height: 50rpx;
line-height: 50rpx;
margin-bottom: 20rpx;
position: relative;
  }
  .dialog-container_title .title-label{
display: inline-block;
width: 100%;
height: 50rpx;
line-height: 50rpx;
font-size: 36rpx;
color: #000;
text-align: center;
  }
  .dialog-container_title .title-icon{
width: 34rpx;
height: 50rpx;
position: absolute;
top: 0;
right: 0;
  }
  .dialog-container_title .title-icon image{
width: 34rpx;
height: 34rpx;
  }
  
  .dialog-container_body {
padding-top: 10rpx;
font-size: 32rpx;
line-height: 50rpx;
  }
  
  .dialog-container_footer {
height: 76rpx;
line-height: 76rpx;
font-size: 32rpx;
text-align: center;
border-top: 1px solid #f1f1f1;
position: absolute;
bottom: 0;
left: 0;
right: 0;
  }
  
  .dialog-container_footer .dialog-container_footer_cancel {
width: 50%;
color: #999;
display: inline-block;
  }
  .dialog-container_footer .dialog-container_footer_cancel::after{
position: absolute;
right: 50%;
bottom: 0;
content: '';
width: 2rpx;
height: 76rpx;
background: #f1f1f1;
  }
  .dialog-container_footer .dialog-container_footer_confirm {
/* color: #3B98F7; */
color:red;
width: 50%;
display: inline-block;
text-align: center;
  }

以下是js代码

Component({
  /**
   * 组件的属性列表
   */
  properties: {      //此处是接收页面传过来的值
    visible:{  //弹框开关,visible类型设值type，visible的值为false（默认）当页面传过来值会改变
      type:Boolean,    
      value:false
    },
    width:{ 
      type:Number,
      value:85
    },
    position:{
      type:String,
      value:'center'
    },
    title:{ //标题
      type:String,
      value:''
    },
    
    showClose:{  //图片是否显示，没有路径时也不显示
      type:Boolean,
      value:true
    },
    img:{  //图片路径
      type:String,
      value:''
    },
    showFooter:{  //确定取消是否显示
      type:Boolean,
      value:false
    },
    color:{ //确定文字的颜色
      type:String,
      value:'red'
    },
  },

  /**
   * 组件的初始数据
   */
  data: {

  },
  options:{
    multipleSlots:true  //在组件定义里的选项中启用多slot支持
  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickMask(){   //点击clickMask弹窗外面时关闭隐藏
      this.setData({visible:false})
    },
    close(){ 
      this.setData({visible:false})
    },
    close(){ //点击取消按扭关闭隐藏，并传值到B页面
      this.setData({visible:false});
      this.triggerEvent('cancel',0);
    },
    confirm(){ //点击确定按扭关闭隐藏，并传值到B页面
      this.setData({visible:false});
      this.triggerEvent('confirm',1);
    }
  }
})
            

　　B页面

在B页面的json里面引用组件，"名字":"引用路径"

 

 

 在页面中使用，并给相应的变量传值，visible显示弹窗， 显示确定取消按扭，title传的值，确定的文字颜色，

 <dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="特别提示" color="{{color}}" bind:confirm="onLinke" bind:cancel="onLinke">
　　　　<view class='dialog-body' slot="dialog-body"> //此处使用的是slot插槽显示文本内容，文本的slot名字应与组件内的name一样
    　　    <view>你个大**</view>
　　    </view>
</dialog>

为了知道用户点击是确定还是取消，所以我们一开始就在组件上设置传到页面的值如进行了区分，

close(){ //点击取消按扭关闭隐藏，并传值到B页面
      this.setData({visible:false});
      this.triggerEvent('cancel',0);
    },
    confirm(){ //点击确定按扭关闭隐藏，并传值到B页面
      this.setData({visible:false});
      this.triggerEvent('confirm',1);
    }

如何接收组件上传的值，在页面上使用

(注bind：分号后面名字要跟组件里的点击方法名一样)

bind:cancel="onLinke"

bind:confirm="onLinke"

给一个点击事件就行，然后进行监听

 

 

选择取消 打印出来

 

 

 可以看到event.detail的值是0

 

 

 确定也是如此，然后就可以根据值进行判断了。

 效果图：