vue+iview弾枠のコード例を書きます。
iViewはVue.jsベースのオープンソースUIコンポーネントライブラリで、主にPCインターフェースの中バックグラウンド製品にサービスしています。
1、iViewの特性
1)高品質、機能豊富
2)友好的なAPIは、空間を自由に活用する。
3)丁寧で綺麗なUI
4)事細かな文書
5)テーマをカスタマイズできます。
2、iViewのインストール:
1)npmを使用する:
this.$nextTick()=>{this.loading=true;);効果が実現できます。具体的に原理を実現します。この穴があったら、先に記録してください。
トランスポートゲート-->https://github.com/iview/iview/issues/597#issuecomment-292422473
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
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のフレームを使う中で、まず弾枠の中のフォームの検証を行う必要があります。検証を通過してから、バックグラウンドインターフェースを呼び出します。最終解決方法は以下の通りです。
<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
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。