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

npm install --save iview 

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

<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>