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
<link rel="stylesheet" href="css/iview.css" rel="external nofollow" > <script src="js/iview.min.js"></script>
<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 '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>
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!