官网如下:https://youzan.github.io/vant-weapp/#/dialog
看效果
1、json中引入
"usingComponents": {
"van-dialog": "/miniprogram_npm/@vant/weapp/dialog/index"
}
2、js引入
import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';
3、wxml引入
<van-dialog id="van-dialog" />
<van-dialog id="wan-not-pass"
use-slot
title="请填写原因"
show="{{ showDialog }}"
show-cancel-button
show-confirm-button
confirm-button-text="确定"
bind:close="onClose"
>
4、默认调用
handleDelayPass() {
console.log('通过');
let _this = this;
let {id} = _this.data;
Dialog.confirm({
title: '提示',
message: '确认通过延迟申请审核吗?',
})
.then(() => {
// on confirm
httpRequest('/StreetManagerAssign/checkDelayApply', {
id: id
}, ({
data
}) => {
// 页面刷新
wx.showToast({
icon: 'success',
title: '操作成功',
duration: 2000,
success: function(){
setTimeout(function(){
// 页面刷新
_this.onShow()
}, 2000)
}
})
}, err => {}, '')
})
.catch(() => {
// on cancel
});
}
5、自定义调用
handleDelayNotPass() {
console.log('不通过');
this.setData({
showDialog:true,
delay_check_result:""
});
},
onClose(e) {
console.log(e);
let _this = this;
if (e.detail == 'confirm') {
console.log('确认不通过');
let {id,delay_check_result} = _this.data;
if (!delay_check_result) {
wx.showToast({
title: '请填写原因',
icon: 'none',
})
} else {
httpRequest('/StreetManagerAssign/checkDelayApply', {
id: id,
type: 2,
delay_check_result:delay_check_result
}, ({
data
}) => {
// 页面刷新
wx.showToast({
icon: 'success',
title: '操作成功',
duration: 2000,
success: function(){
setTimeout(function(){
// 页面刷新
_this.onShow()
}, 2000)
}
})
}, err => {}, '')
}
}
},
// 改变审核不通过原因
onChangeContent(e){
this.setData({ delay_check_result:e.detail.value})
}
小结:基本满足各种需求,可以灵活运用组件模式来自用处理弹出层的业务。