vue+iview to write a pop-up frame sample code

iView is a set of open source UI component libraries based on, mainly serving the middle and backend products of the PC interface.

1. Features of iView

1) High quality, rich in functions
2) Friendly API, free and flexible use of space
3) Delicate and beautiful UI
4) Documents that are very detailed
5) Customizable themes

2. iView installation:

1) Use npm:

npm install --save iview

2) CDN introduction:

<link rel="stylesheet" href="css/" rel="external nofollow" > 
<script src="js/"></script>

Due to the needs of the company's project, I have now tinkered with vue+iview to build a project. The environments used are all version 1.0. In the iview pop-up box, since it is necessary to verify the form in the pop-up box first, the background interface will be called after passing the verification. However, the confirm button in the iview pop-up box disappears after clicking the pop-up box. What should I do? To achieve the effect, various search information, the final solution is as follows:

&lt;template&gt; 
  &lt;!--Cancel the order pop-up frame and the boss approve pop-up frame--&gt; 
   &lt;Modal 
    :="show" 
    title="hint" 
    :loading="loading" 
    @on-ok="asyncOK"&gt; 
    &lt;Row&gt; 
      &lt;i-col span="3"&gt;&lt;/i-col&gt; 
      &lt;i-col span="1" style="color:red;margin-top:7px;font-weight: bold"&gt;*&lt;/i-col&gt; 
      &lt;i-col span="2" style="margin-top:5px;"&gt;Authorization code&lt;/i-col&gt; 
      &lt;i-col span="6"&gt; 
       &lt;input class="ivu-input errorInput" type="number" v-model="code" placeholder="Please enter" @blur="codeBlur"&gt; 
       &lt;div class="fade-transition ivu-form-item-error-tip error" style="display:none;position: static"&gt;Verification code error&lt;/div&gt; 
      &lt;/i-col&gt; 
      &lt;i-col span="3" style="margin-left:5px;"&gt; 
          &lt;i-button type="primary" :loading="loadingBtn" @click="toLoading"&gt; 
            &lt;span v-if="!loadingBtn"&gt;{{btnText}}&lt;/span&gt; 
            &lt;span v-else&gt;{{btnText}}&lt;/span&gt; 
          &lt;/i-button&gt; 
      &lt;/i-col&gt; 
    &lt;/Row&gt; 
  &lt;/Modal&gt; 
&lt;/template&gt; 
&lt;script type="text/javascript"&gt; 
import { 
  orderService 
} from 'jo' 
  export default { 
    props:["show"], 
    data(){ 
      return { 
        loading:true, 
        loadingBtn:false,//Click the application cancel button and loading        btnText:'Apply for cancellation of order', 
        code:"",//Verification code        clearTime:"",//Timer        countDownIndex:60,//60 seconds countdown      } 
    }, 
    methods:{ 
      codeBlur(){ 
        if( == ""){ 
          $(".errorInput").css("border","1px solid red") 
          $(".error").css("display","block") 
        }else{ 
          $(".errorInput").css("border","1px solid #d7dde4") 
          $(".error").css("display","none") 
        } 
      }, 
       toLoading(){ 
          //Calling the send verification code interface   //      let operName = ("userName") 
            // (operName,,1) 
          ()   
 
      }, 
      countDown(){ 
          //Countdown          var that = this; 
           = true 
           = +"Second" 
          --; 
           = setInterval(function(){ 
            () 
            if( == 0){ 
                 = 60 
                 = "send" 
                 = false 
                () 
              return false 
            } 
              = +"Second" 
             --; 
          },1000) 
         // } 
      }, 
      asyncOK(){ 
        //submit        if( == ""){ 
           = true 
          ('sdasda'+) 
          $(".errorInput").css("border","1px solid red") 
          $(".error").css("display","block") 
           = false 
          this.$nextTick(() =&gt; {  = true;}); 
          return 
        } 
        this.$nextTick(() =&gt; { = true; }); 
         // let operId = ("crmUserId") 
      //    let operName = ("userName") 
      //    if(){ 
      //    orderService.sendSingleUpdate03(, 3, operName, operId, ).then(res =&gt; ()) 
      //    }else{ 
      //     orderService.sendSingleUpdate03(, 2, operName, operId, ).then(res =&gt; ()) 
      //    } 
      } 
    } 
  } 
&lt;/script&gt;

The general idea is to first name a variable loading, which must be true, and then when clicking the submit button in the pop-up box, first set loading to false, and then add it

This.$nextTick(() => { = true;}); can achieve the effect. If you encounter this pit, record it first.

Portal -->/iview/iview/issues/597#issuecomment-292422473

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.