微信小程序彈框組件

在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

 

 

 確定也是如此，然后就可以根據值進行判斷了。

 效果圖：