微信小程序怎样自定义dialog组件

参数：title标题 cancelText取消文本(默认文本为取消） confirmText确认文本（默认文本为确定） animated是否动画（默认为是） modalSize模态框大小(默认md) animationOption动画事件(默认300s)接下来分享下实现步骤吧...主要的概念就是想把自定义的部分通过插槽来接收。1、创建好components组件且命好名字。 小tips:在微信开发工具内创建方便点它会自动帮你把相关文件配好。创建组件且命名2、写好相关布局及样式。dialog.wxss/**模态**/ .modal{ position:fixed; top:0rpx; left:0rpx; right:0rpx; bottom:0rpx; width:100\%; height:100\%; z-index:100; } .modal-mask{ position:absolute; width:100\%; height:100\%; z-index:97; background-color:rgba(0,0,0,0.30); } .modal-layer-sm{ width:60\%; transform:translate3d(-50\%,-50\%,0); left:50\%; } .modal-layer-md{ width:80\%; transform:translate3d(-50\%,-50\%,0); left:50\%; } .modal-layer-full{ width:100\%; left:0; } .modal-layer{ position:absolute; background:transparent; top:50\%; display:flex; flex-direction:column; z-index:98; box-shadow:04rpx14rpxrgba(0,0,0,.4); } .modal-header{ background:#fff; color:#333; padding:20rpx; font-size:30rpx; text-align:center; border-top-left-radius:10rpx; border-top-right-radius:10rpx; } .modal-body{ flex:1; padding:040px40rpx; background:#ffffff; } .modal-footer{ background:#ffffff; flex-direction:row; display:flex; align-items:center; width:100\%; border-top:1rpxsolid#eee; border-bottom-left-radius:10rpx; border-bottom-right-radius:10rpx; } .modal-close{ color:#fff; font-size:48rpx; position:absolute; right:40rpx; top:0; z-index:98; } .btn{ flex:1; text-align:center; font-size:30rpx; color:#666; padding:19rpx5rpx; } .btn:first-child{ border-right:1pxsolid#eee; } .btn-primary{ color:#009887; }dialog.wxmlviewanimation={{animationData}}hidden={{!isShow}}class=modal viewdata-type=maskcatchtap=hideModalclass=modal-mask/view viewclass=modal-layermodal-layer-radius{{modalSize==sm?modal-layer-sm:modal-layer-md}} !--头部--viewclass=modal-header text{{title}}/text/view !--内容区域--viewclass=modal-body slot/slot/viewviewclass=modal-footer textcatchtap=\_cancelModalclass=btnbtn-default{{cancelText}}/texttextcatchtap=\_c