vue+iview写个弹框的示例代码

iview 是一套基于vue.js的开源ui组件库，主要服务于pc界面的中后台产品。

1、iview的特性

1) 高质量、功能丰富
2) 友好的api ，*灵活地使用空间
3) 细致、漂亮的 ui
4) 事无巨细的文档
5) 可自定义主题

2、iview的安装：

1) 使用npm：

npm install --save iview 

2) cdn引入：

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

由于公司项目需要，所以目前捣鼓了vue+iview搭建了一个项目，用的环境都是1.0版本，在使用iview弹框中，由于需要先进行弹框中表单的验证，验证通过才调用后台接口，但是呢，iview弹框中的确定按钮点击一下弹框就消失了，怎么办，要实现效果，各种翻看资料，最终解决办法如下:

<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"> 
       <div class="fade-transition ivu-form-item-error-tip error" style="display:none;position: static">验证码错误</div> 
      </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 'jo' 
  export default { 
    props:["show"], 
    data(){ 
      return { 
        loading:true, 
        loadingbtn:false,//点击申请取消按钮后loading 
        btntext:'申请取消订单', 
        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('sdasda'+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> 

大概思路就是先命名一个变量loading，这里必须为true,然后在点击弹框的提交按钮的时候先把loading设置为false，然后必须加上

this.$nexttick(() => { this.loading = true;});就能实现效果啦，具体实现原理，这坑遇到了，就先记录下来  

传送门-->https://github.com/iview/iview/issues/597#issuecomment-292422473 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。