官网如下:
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}) }
小结:基本满足各种需求,可以灵活运用组件模式来自用处理弹出层的业务。