在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
确定也是如此，然后就可以根据值进行判断了。
效果图：
请发表评论