vue+iview写个弹框的示例代码


Posted in Javascript onDecember 05, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 对象链式操作测试代码
Apr 25 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
详解React中setState回调函数
Jun 14 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
Node.js创建Web、TCP服务器
Dec 05 #Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 #Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 #jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 #jQuery
最实用的JS数组函数整理
Dec 05 #Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 #Javascript
Vue DevTools调试工具的使用
Dec 05 #Javascript
You might like
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python标准库之Sys模块使用详解
2015/05/23 Python
python插入排序算法实例分析
2015/07/03 Python
python批量制作雷达图的实现方法
2016/07/26 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
Linux操作面试题
2015/02/11 面试题
住宅使用说明书
2014/05/09 职场文书
体育教师个人工作总结
2015/02/09 职场文书
市场部岗位职责
2015/02/12 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
Nginx配置https的实现
2021/11/27 Servers
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js