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 相关文章推荐
批量实现面向对象的实例代码
Jul 01 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
JS实现520 表白简单代码
May 21 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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
php框架Phpbean说明
2008/01/10 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
小学英语教学反思案例
2014/02/04 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
专职安全员岗位职责
2015/04/11 职场文书
小学体育课教学反思
2016/02/16 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
python高温预警数据获取实例
2022/07/23 Python