집 > 기사 > 웹 프론트엔드 > vue+iview에서 팝업 상자를 작성하는 방법(자세한 튜토리얼)

vue+iview에서 팝업 상자를 작성하는 방법(자세한 튜토리얼)

亚连원래의: 2018-06-22 15:57:424690검색

이 글에서는 주로 vue+iview에서 팝업박스 작성을 위한 샘플 코드를 소개하고 있는데, 편집자께서 꽤 괜찮다고 생각하셔서 지금 공유하고 참고용으로 올려드리겠습니다.

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

일반적인 아이디어는 변수 로딩의 이름을 지정하는 것입니다. , 팝업 상자의 제출 버튼을 클릭할 때 로딩을 false로 설정한 다음

this.$nextTick(() => { this.loading = true;}); , 구체적인 구현 원칙, 이 함정에 직면하면 먼저 기록해 두세요

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

위 내용은 제가 편집한 것입니다 여러분. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

vue+iview에서 팝업 상자를 작성하는 방법(자세한 튜토리얼)

관련 기사