1、组件实现相关文件和代码：

• dialog.js

Component({
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
    properties: {
        dialogVisible: Boolean,
        width: String
    }
})

• dialog.json

{
  "component": true,
  "usingComponents": {}
}

• dialog.wxml

<view class='wx_dialog_container' hidden="{{!dialogVisible}}">
    <view class='wx-dialog' style="width:{{width||'480rpx'}}">
        <!-- <view class='wx-dialog-title'>{{ title }}</view> -->
        <view class='wx-dialog-content'>
                        <slot name="content"></slot>
                </view>
    </view>
</view> 

• dialog.wxss

.wx_dialog_container {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.wx-dialog {
    position: fixed;
    z-index: 5000;
    width: 480rpx;
    border-radius: 8rpx;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #FFFFFF;
    text-align: center;
    overflow: hidden;
}

.wx-dialog-content {
    padding: 20rpx 30rpx;
    word-wrap: break-word;
    word-break: break-all;
    max-height: 70vh;
    overflow-y: auto;
}

2、使用案例和效果展示

• 使用示例截图如下：

  
  
  image.png

• 示例代码（切记在使用组件时，需要在页面相应的json文件中引用组件，基本操作莫忘了）

<my-dialog dialogVisible="{{dialogVisible}}" width="650rpx">
            <view slot="content">
                此处定制化你的弹窗内容....
            </view>
        </my-dialog>

3、写在最后

由于我的弹窗相应比较基础，没有做太多封装，简易示例下组件如果封装使用而已。小程序和vue的组件封装思路比较类似，主要就是扩展属性和slot的使用。