在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=''></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:cancel="onLinke"

bind:confirm="onLinke"

(注bind：分號後面的要跟元件裡的點選方法名)
給一個點選事件就知道，然後進行監聽

打印出來選擇取消

可以看到event.detail的值是0

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