需求描述

• 点击操作弹窗显示后，我填写一个表单，表单校验通过后，再调用api接口，返回成功后，关闭弹窗。

遇到的问题

• 点击确定时，无论表单验证通过不通过表单都会默认关闭

解决

查阅官方文档发现dialog中有一个参数可以去阻止默认关闭

<van-dialog
      v-model="showPicker"
      title="标题"
      @confirm="confirm"
      @cancel="showPicker =false"
      :beforeClose="onBeforeClose"
      show-cancel-button
>
    <van-form ref="formData">
        <van-field
            v-model="formData.realName"
            required
            label="姓名"
            input-align="right"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '请输入姓名!', trigger: 'onBlur' }]"
        />
    </van-form>
</van-dialog>

methods: {
  confirm() {
  this.$refs.formData.validate().then(() => {
    this.showPicker= false // 表单验证通过后手动关闭弹框
    ...
  }).catch(() => {
    ...
  })
},
  // 取消默认关闭弹框事件
  onBeforeClose(action, done) {
    return done(false)
  },
}

结尾

• 这样就可先进行表单验证，验证成功后才会关闭弹框