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 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 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
Zerg基本策略
2020/03/14 星际争霸
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
用来解析.htgroup文件的PHP类
2012/09/05 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
js编写三级联动简单案例
2016/12/21 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
js实现随机点名功能
2020/12/23 Javascript
浅谈django中的认证与登录
2016/10/31 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
python开根号实例讲解
2020/08/30 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
什么是Smart Navigation?
2016/07/03 面试题
高中军训感言1000字
2014/03/01 职场文书
什么是就业协议书
2014/04/17 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
电子专业求职信
2014/06/19 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP