文章目录
在组件中直接使用
van-popup
组件是不可以的,所以只能定义一个内部组件,在用到的时候放到van-popup
组件中即可,类似于下面的思想。
<van-popup>
<my-component />
</van-popup>
定义子组件作为内部组件
components/ext-confirm/index.json
{
"component": true
}
components/ext-confirm/index.wxml
<view class="modal" catchtap="catchClick" animation="{{dialogAni}}">
<view class="header">
{{title}}
</view>
<view class="body">
{{msg}}
</view>
<view class="footer">
<button class="cancel" catchtap="bindCancel">{{btnCancel}}</button>
<button class="yes" catchtap="bindYes">{{btnYes}}</button>
</view>
</view>
components/ext-confirm/index.js
这里的js比较简单,只有一些需要自定义值的属性和按钮暴露的方法,不包含复杂的逻辑处理
Component({
properties:{
title: {
type: String,
value: '提示'
},
msg: {
type: String,
value: '确定要删除吗?'
},
btnYes: {
type: String,
value: '确定'
},
btnCancel: {
type: String,
value: '取消'
}
},
methods:{
bindYes() {
this.triggerEvent('bindYes')
},
bindCancel() {
this.triggerEvent('bindCancel')
}
}
})
components/ext-confirm/index.wxss
.modal {
height: auto;
box-sizing: border-box;
text-align: center;
}
.body {
line-height: 3rem;
font-size: 1.2rem;
font-weight: bold;
color: #555;
margin: 10rpx 0;
}
.footer {
display: flex;
}
.footer button {
color: #fff;
width: 250rpx;
border-radius: 50rpx;
background-color: #03c64a;
background-image: linear-gradient(133deg, #03c64a 18%, #21a1ff 86%);
height: 80rpx;
line-height: 80rpx;
}
.footer .yes {
}
.footer .cancel {
background-color: #f5f5f5;
background-image: linear-gradient(135deg, #f5f5f5 0%, #aaa 100%);
}
父组件中调用
差别不大,只是将定义的组件放到
van-popup
组件中
parent.wxml
<button bindtap="bindDialog">open</button>
<van-popup class="ext-popup" position="bottom" show="{{visible}}">
<ext-confirm title="提示" msg="确定要删除收货地址吗?" bind:bindYes="bindOk" bind:bindCancel="bindCancel" />
</van-popup>
parent.js
data: {
visible: false,
}
bindDialog(){
this.setData({
visible: !this.data.visible
})
}
bindOk() {...}
bindCancel(){...}