微信小程序用vant，dialog弹出框

本文主要是介绍微信小程序用vant，dialog弹出框，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

官网如下：
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})
  }

小结:基本满足各种需求，可以灵活运用组件模式来自用处理弹出层的业务。

这篇关于微信小程序用vant，dialog弹出框的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！