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