• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

官网如下:
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  />


<van-dialog 
  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})
  }

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap