Comment écrire une boîte pop-up dans vue+iview (tutoriel détaillé)

Cet article présente principalement l'exemple de code pour écrire une boîte pop-up dans vue+iview. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

iView est un ensemble de bibliothèques de composants d'interface utilisateur open source basées sur Vue.js, qui sert principalement les produits mid-end et back-end des interfaces PC.

1. Caractéristiques d'iView

1) Fonctions riches et de haute qualité
2) API conviviale, utilisation gratuite et flexible de l'espace
3) Détaillée , Belle interface utilisateur
4) Documentation détaillée
5) Thèmes personnalisables

2 Installation d'iView :

1) Utilisez npm :

npm install --save iview

2) Introduction au CDN :

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

En raison des besoins du projet de l'entreprise, j'ai actuellement construit un projet en utilisant vue+iview, et l'environnement utilisé est la version 1.0 lors de l'utilisation de iview pop. -up, le formulaire dans la boîte contextuelle doit d'abord être vérifié et l'interface d'arrière-plan n'est appelée qu'une fois la vérification réussie. Cependant, lorsque vous cliquez sur le bouton OK dans la boîte contextuelle iview, la fenêtre contextuelle est affichée. up box disparaît. Que dois-je faire ? Pour obtenir l'effet, Après lecture de diverses informations, la solution finale est la suivante :

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

L'idée générale est de nommer d'abord une variable de chargement, qui doit être vraie. , puis définissez le chargement sur false lorsque vous cliquez sur le bouton d'envoi de la boîte contextuelle, vous devez alors ajouter

this.$nextTick(() => { this.loading = true;}); pour obtenir l'effet. Le principe de mise en œuvre spécifique. Si vous rencontrez ce piège, enregistrez-le d'abord

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter l'authentification du service d'autorisation OAuth2.0 dans nodejs

Comment implémenter la fonction de forum de messages dans JS

Comment déterminer les jours fériés en js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!