<> Requirement description :

Requirement description : The official document is the component call mode , It's function call mode again .
I just need a very simple one : After clicking the operation pop-up window , I fill out a form , After form verification , Call again API Interface , After successful return , Close the pop-up window .

A very simple thing ,element-ui It's very convenient to use , It's a shame to be here , It's just the beginning , The pop-up window is closed , To return the result of the asynchronous interface call . Slow down the Internet , It's really bad to use .

<> The right solution :
<van-dialog v-model="showDialog" title=" Tips " show-cancel-button :before-close=
"onBeforeClose" @confirm="handleConfirm" > <van-form ref="myform"> <van-field v-
model="attendanceName" name="name" label=" name " placeholder=" Please enter a name " :rules="[ {
required: true, message: ' Please fill in the name ' } ]" /> </van-form> </van-dialog>
Key points ,showDialog Control show hide ,before-close Controls the callback before closing ,confirm It is an event triggered by clicking the confirm button in the pop-up window ,ref Get it form example .

At first, I put the form verification in the before-close, The result of implementation is wrong .
onBeforeClose(action, done) { if (action === "confirm") { return done(false); }
else { // Reset form validation this.$refs["myform"].resetValidation("name"); this.name=
undefined; return done(); } },
I put onBeforeClose In , Click confirm confirm Operation of ,done(false), Prevent pop ups from closing

Close the pop-up window after the form verification and asynchronous interface request are successful , All in handleConfirm In operation ,
// Instance pop up confirmation handleConfirm() { this.$refs["myform"] .validate() .then(() => { let
para= { data: { name: this.name, }, }; ajaxAdd(para).then(() => { this.
showDialog= false; // Manually close the pop-up window here this.$toast.success(" Added successfully "); this.name=
undefined; this.onRefresh(); }); }) .catch(() => {}); },
After this modification , Click Cancel , It can be closed directly . Click confirm , Form verification is required first , After successful verification , To send it ajax Asynchronous request , After the request interface returns success , Will close the pop-up window .

Technology
©2019-2020 Toolsou All rights reserved,
Python Basic knowledge and notes Programmer Tanabata Valentine's Day confession code NOI2019 travels China's longest high speed rail officially opened ! The fastest way to finish the race 30.5 hour C Language programming to find a student's grade Software testing BUG describe ESP8266/ESP32 System : Optimize system startup time Unity Scene loading asynchronously ( Implementation of loading interface ) Baidu , Ali , Tencent's internal position level and salary structure , With job suggestions !PYTHON Summary of final review