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>