Dialog 弹出框 开启异步关闭

一、 需求场景

1.在添加分组时会弹出一个输入弹框
2.在输入后，点击确认按钮就行，添加分组操作
3.在点击按钮的同时会判断这个内容为空时，会toast提示内容不能为空，当分组名重复时，会提示当前分组名已存在

二、 使用Dialog的坑

vant—Dialog弹出框

1. 没有带输入框的弹窗

   可通过设置use-slot 为true来自定义弹窗内容

2. 当你点击后，弹窗会有默认的关闭行为，当你判断好条件，setData那个show为true，弹窗会出现先消失后出现的效果

   可通过设置async-close为true，开启异步关闭弹窗，开启后需要手动控制弹窗的关闭（也就是说默认关闭弹窗的行为被关闭的，也就是当你点击取消与确认按钮时，不会默认关闭弹窗，需要手动 bind:cancel="_cancel"、 bind:confirm="_confirm",并在方法中设置show为false，才能关闭弹窗）

3. 当你设置async-close为true时，又有新的问题。无法关闭async-close为true产生的加载样式

   用Dialog.stopLoading 无效 设置这个之后默认的弹出框关闭行为会取消，要手动设置在绑定cancel和confirm方法中使用 e.detail.dialog.stopLoading();或者e.mp.detail.dialog.stopLoading()【mpvue写法】关闭loading的状态

参考自https://github.com/youzan/vant-weapp/issues/1021

三、Dialog弹出输入框封装

1. dialog.json

{
  "component": true,
  "usingComponents": {
    "van-dialog": "@vant/weapp/dialog/index",
    "van-field": "@vant/weapp/field/index"
  }
}

2. dialog.wxml

<van-dialog
  async-close
  bind:cancel="_cancel"
  bind:confirm="_confirm"
  cancel-button-color="{{cancelButtonColor}}"
  cancel-button-text="{{cancelButtonText}}"
  confirm-button-color="{{confirmButtonColor}}"
  confirmButtonText="{{confirmButtonText}}"
  show="{{show}}"
  show-cancel-button="{{true}}"
  title="{{title}}"
  use-slot="{{useSlot}}"
>
  <view class="add-group-input mt-45 mb-60 ml-96">
  
  //使用border为false可以去除field下面的横线，然后用custom-style,来自定义输入框的样式
  
    <van-field
      border="{{false}}"
      custom-style="border: 1rpx solid #dddddd;border-radius: 6rpx;"
      maxlength="{{maxlength}}"
      model:value="{{ value }}"
      placeholder="请输入"
    />
  </view>
</van-dialog>

3. dialog.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    maxlength: {
      type: String,
    },
    value: {
      type: String,
    },
    cancelButtonColor: {
      type: String,
      value: '#333',
    },
    cancelButtonText: {
      type: String,
      value: '取消',
    },
    confirmButtonText: {
      type: String,
      value: '确认',
    },
    confirmButtonColor: {
      type: String,
      value: '#1989fa',
    },
    show: {
      type: Boolean,
    },
    title: {
      type: String,
    },
    useSlot: {
      type: Boolean,
      value: false,
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    _cancel(e) {
      this.triggerEvent('cancel', e.detail);
    },
    _confirm(e) {
      this.triggerEvent('confirm', e.detail);
    },
  },
});

4. dialog.wxss

.add-group-input {
  width: 426rpx;
  height: 72rpx;
  margin: 45rpx 0 60rpx 96rpx;
}

四、封装组件的使用

1. index.json

{
  "navigationBarTitleText": "dialog使用",
  "usingComponents": {
    "dialog": "./components/dialog/dialog"
  }
}

2. index.wxml

<dialog
  bind:cancel="cancelAddGroup"
  bind:confirm="addGroup"
  confirm-button-color="#45A9ED"
  confirmButtonText="添加分组"
  maxlength="{{maxLength}}"
  model:value="{{ addGroupValue }}"
  show="{{  isAddGroupDialogShow }}"
  title="请输入分组名"
  use-slot
></dialog>

3. index.js

 // 添加分组
  async addGroup(e) {
    // 用于隐藏使用async-close时产生的加载样式
    e.detail.dialog.stopLoading();
    try {
      let name = this.data.addGroupValue;

      if (!name) {
        toastMsg('请先填写分组名');

        this.setData({
          isAddGroupDialogShow: true,
        });
      } else {
        let res = await addGroup({ name });
        if (res.success) {
          this.getPatientGroups();
          this.setData({
            addGroupValue: '',
            isAddGroupDialogShow: false,
          });
        } else {
          toastMsg(res.msg);
          this.setData({
            isAddGroupDialogShow: true,
          });
        }
      }
    } catch (e) {
      console.log('添加分组失败', e);
    }
  },

  cancelAddGroup() {
    this.setData({
      addGroupValue: '',
      isAddGroupDialogShow: false,
    });
  },