So schreiben Sie ein Popup-Fenster in vue+iview (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich der Beispielcode zum Schreiben einer Popup-Box in vue + iview vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

iView ist eine Reihe von Open-Source-UI-Komponentenbibliotheken auf Basis von Vue.js, die hauptsächlich Mid- und Back-End-Produkte von PC-Schnittstellen bedienen.

1. Funktionen von iView

1) Hohe Qualität, umfangreiche Funktionen
2) Freundliche API, kostenlose und flexible Raumnutzung
3) Detaillierte , Schöne Benutzeroberfläche
4) Detaillierte Dokumentation
5) Anpassbare Themen

2. iView-Installation:

1) Verwenden Sie npm:

npm install --save iview

2) CDN-Einführung:

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

Aufgrund der Anforderungen des Unternehmensprojekts habe ich derzeit ein Projekt mit vue+iview erstellt. Die verwendete Umgebung ist Version 1.0 Das Formular im Popup-Feld muss zuerst überprüft werden und die Hintergrundschnittstelle wird erst aufgerufen, nachdem die Überprüfung bestanden wurde. Das Popup-Fenster verschwindet jedoch, nachdem Sie im iview-Popup-Feld auf die Schaltfläche „OK“ geklickt haben. Was soll ich tun? Um den Effekt zu erzielen, durchsuchen Sie verschiedene Informationen. Die endgültige Lösung lautet wie folgt:

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

Die allgemeine Idee besteht darin, zuerst eine Variable zu benennen, die wahr sein muss, und dann beim Klicken auf die Klicken Sie auf die Schaltfläche „Senden“ im Popup-Fenster. Stellen Sie das Laden zunächst auf „false“ ein und fügen Sie dann

this.$nextTick(() => { this.loading = true;}); hinzu . Das spezifische Implementierungsprinzip: Wenn Sie auf diese Gefahr stoßen, notieren Sie sie zuerst

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die OAuth2.0-Autorisierungsdienstauthentifizierung in nodejs

So implementieren Sie die Message-Board-Funktion in JS

So bestimmen Sie Feiertage in js

Das obige ist der detaillierte Inhalt vonSo schreiben Sie ein Popup-Fenster in vue+iview (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!