vue+iview 는 탄 상자 의 예제 코드 를 씁 니 다.
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">
<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>
아마도 생각 은 변수 loading 을 먼저 명명 하 는 것 입 니 다.여 기 는 true 이 어야 합 니 다.그리고 탄 상자 의 제출 단 추 를 누 를 때 먼저 loading 을 false 로 설정 한 다음 에 반드시 추가 해 야 합 니 다.this.$nextTick(() => { this.loading = true;});효 과 를 실현 할 수 있 습 니 다.원 리 를 구체 적 으로 실현 할 수 있 습 니 다.이 구 덩이 는 만 났 으 니 먼저 기록 하 세 요.
전송 문-->https://github.com/iview/iview/issues/597#issuecomment-292422473
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.