子组件
// commonPop.wxml
<view class="commonPop" hidden="{{!isShow}}">
<view class="mask" bindtap="hideDialog"></view>
<view class="btn_area">
<view class="items" data-id="{{items.id}}" bindtap="choose"
wx:for="{{btnList}}" wx:for-item="items" wx:key="items.id">
{{items.name}}
</view>
</view>
</view>
// commonPop.json
{
"component": true,
"usingComponents": {}
}
/* commonPop.wxss */
.commonPop {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.commonPop .mask {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.commonPop .btn_area {
width: 90%;
min-height: 165rpx;
background-color: #fff;
position: absolute;
z-index: 2;
bottom: 40rpx;
border-radius: 16rpx;
}
.commonPop .btn_area .items {
text-align: center;
height: 100rpx;
line-height: 100rpx;
border-bottom: 0.5rpx solid #ccc;
}
.commonPop .btn_area .items:last-child {
border-bottom: none;
}
// commonPop.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
* 用于组件自定义设置
*/
properties: {
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: { // 弹窗显示控制
isShow: false,
btnList: [
{ id: 1, name: '拍照' },
{ id: 2, name: '从相册中选取' },
{ id: 3, name: '取消' }
]
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/**
* 公有方法
*/
//隐藏弹框
hideDialog() {
this.setData({
isShow: !this.data.isShow
})
},
//展示弹框
showDialog() {
this.setData({
isShow: !this.data.isShow
})
},
choose(e) {
let id = e.target.dataset.id
this.triggerEvent('choose', id)
}
}
})
父组件
// father.wxml
<commonPop id="dialog" bind:choose="choose"></commonPop>
// father.json
{
"usingComponents": {"commonPop": "/pages/commonPop/commonPop"}
}
onReady() {
this.dialog = this.selectComponent("#dialog")
},
showDialog() {
this.dialog.showDialog();
},
choose(val) {
let id = val.detail
if (id == 3) {
this.dialog.hideDialog();
}
}