How to write a pop-up box in vue+iview (detailed tutorial)

This article mainly introduces the sample code for writing a pop-up box in vue iview. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

iView is a set of open source UI component libraries based on Vue.js, which mainly serves mid- and back-end products of PC interfaces.

1. Features of iView

1) High quality, rich functions
2) Friendly API, free and flexible use of space
3) Detailed , Beautiful UI
4) Detailed documentation
5) Customizable themes

2. iView installation:

1) Use npm:

npm install --save iview

2) CDN introduction:

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

Due to the needs of the company's project, I have currently built a project with vue iview. The environment used is version 1.0. I am using the iview pop-up box. , since the form in the pop-up box needs to be verified first, the background interface will be called only after the verification is passed. However, the pop-up box disappears after clicking the OK button in the iview pop-up box. What should I do? To achieve the effect, browse the information in various ways , the final solution is as follows:

<template> 
  <!--取消订单弹框和老板批准弹框--> 
   <Modal 
    :visible.sync="show" 
    title="提示" 
    :loading="loading" 
    @on-ok="asyncOK"> 
    <Row> 
      <i-col span="3"></i-col> 
      <i-col span="1" style="color:red;margin-top:7px;font-weight: bold">*</i-col> 
      <i-col span="2" style="margin-top:5px;">授权码</i-col> 
      <i-col span="6"> 
       <input class="ivu-input errorInput" type="number" v-model="code" placeholder="请输入" @blur="codeBlur"> 
       <p class="fade-transition ivu-form-item-error-tip error" style="display:none;position: static">验证码错误</p> 
      </i-col> 
      <i-col span="3" style="margin-left:5px;"> 
          <i-button type="primary" :loading="loadingBtn" @click="toLoading"> 
            <span v-if="!loadingBtn">{{btnText}}</span> 
            <span v-else>{{btnText}}</span> 
          </i-button> 
      </i-col> 
    </Row> 
  </Modal> 
</template> 
<script type="text/javascript"> 
import { 
  orderService 
} from &#39;jo&#39; 
  export default { 
    props:["show"], 
    data(){ 
      return { 
        loading:true, 
        loadingBtn:false,//点击申请取消按钮后loading 
        btnText:&#39;申请取消订单&#39;, 
        code:"",//验证码 
        clearTime:"",//定时器 
        countDownIndex:60,//60秒倒计时 
      } 
    }, 
    methods:{ 
      codeBlur(){ 
        if(this.code == ""){ 
          $(".errorInput").css("border","1px solid red") 
          $(".error").css("display","block") 
        }else{ 
          $(".errorInput").css("border","1px solid #d7dde4") 
          $(".error").css("display","none") 
        } 
      }, 
       toLoading(){ 
          //调用发送验证码接口 
   //      let operName = window.sessionStorage.getItem("userName") 
            // accountService.recommenderGetCode(operName,this.selectDelteOne.recommender,1) 
          this.countDown()   
 
      }, 
      countDown(){ 
          //倒计时 
          var that = this; 
          that.loadingBtn = true 
          that.btnText = that.countDownIndex+"秒" 
          that.countDownIndex--; 
          that.clearTime = setInterval(function(){ 
            console.log(that.countDownIndex) 
            if(that.countDownIndex == 0){ 
                that.countDownIndex = 60 
                that.btnText = "发送" 
                that.loadingBtn = false 
                window.clearTimeout(that.clearTime) 
              return false 
            } 
             that.btnText = that.countDownIndex+"秒" 
             that.countDownIndex--; 
          },1000) 
         // } 
      }, 
      asyncOK(){ 
        //提交 
        if(this.code == ""){ 
          this.show = true 
          console.log(&#39;sdasda&#39;+this.show) 
          $(".errorInput").css("border","1px solid red") 
          $(".error").css("display","block") 
          this.loading = false 
          this.$nextTick(() => { this.loading = true;}); 
          return 
        } 
        this.$nextTick(() => {this.loading = true; }); 
         // let operId = window.sessionStorage.getItem("crmUserId") 
      //    let operName = window.sessionStorage.getItem("userName") 
      //    if(this.isApply){ 
      //    orderService.sendSingleUpdate03(this.data, 3, operName, operId, this.code).then(res => this.updateList(res.message)) 
      //    }else{ 
      //     orderService.sendSingleUpdate03(this.data, 2, operName, operId, this.code).then(res => this.updateList(res.message)) 
      //    } 
      } 
    } 
  } 
</script>

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

this.$nextTick(() => { this.loading = true;}); can achieve the effect. The specific implementation principle. If you encounter this pitfall, record it first

Transmission Door-->https://github.com/iview/iview/issues/597#issuecomment-292422473

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement OAuth2.0 authorization service authentication in nodejs

How to implement the message board function in JS

How to determine holidays in js

The above is the detailed content of How to write a pop-up box in vue+iview (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!