写在开头:本次项目采用的是vue2.0+iview3.0,最近公司没啥事,来总结一下开发过程中遇到的问题. 1.Modal关闭问题 需求背景:modal框里面是个form表单,点击确定之后,先验证form表单,验证通过则关闭modal框,验证不成功则提示用户,不关闭. 问题描述:本来刚开始想通过modal框v-model绑定的值(true或false)来进行控制,手动改之后,报错. 解决办法: 官方iview的modal组件的api里面有个loading属性,可通过控制loading的值来进行控

这是我第一次写博客,主要是记录下自己解决问题的过程和知识的总结,如有不对的地方欢迎指出来! 需求:点击btn,弹出modal显示图表(以折现图为例) 这应该是很基本的需求也是很容易实现的,代码和效果如下: 代码解释:setTem是一个方法,改变modal为true,默认为false : chart-line是图表子组件,通过data向其传递参数,data绑定的数据是父组件mounted后拿到的数据 效果图:点击btn后的确显示了modal框,但是里面的图表不能显示,接着改变子组件任何代码,迫使重

按照iview官网介绍写的form表单验证,但是无论填写与否都不进行校验,找了很久的原因,突然才发现一个关键的地方,一定要加props!!! https://blog.csdn.net/xuaner8786/article/details/80008925 这是网友总结的iview表单验证注意点,我在这里再补充 props一定要加这一点!否则表单验证不生效.

在modal中初始化状态,点击确定弹窗消失. 有的时候表单验证就不希望立刻消失 在iview官网中有自定义页头页脚 可以直接自定义使用 另一种验证写法 serform: { ctCatelogue: [{ required: true, message: "请输入名称", trigger: "blur" }, { type: 'string', pattern: /^\/./, message: '请填写正确路径', trigger: 'blur' } ], },

文档中说激活面板的name用value,页面第一次加载的时候可以,放在modal里就不好使了,每次打开的时候总显示上一次离开时的界面. 真正能用的是 this.$refs.tabs.activeKey = 'name1' ,此方法也可以动态设置Tabs页面. html: <Modal v-model="modal.visible" width="80%" transfer :title="modal.title" footer-hide&g

modal的使用是平级的,后面的会覆盖前面,如下<modal>111</modal><modal>222</modal>内容为222的弹框会在内容为111的弹框上面显示 有些场景需要在modal中在弹出modal,上面的使用就不符合要求了看了文档说是给modal的class-name属性添加值,格式如下<modal>333 <modal class-name="my-modal">444</modal>

给想要显示到顶层的modal 设置class属性 .my-modal-parent { position: fixed; // 浮动 z-index:; }

对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677   注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间一直在学习bootstrap,主要是用于做后台,一直习惯用easyui,ui,jgrid前端框架,以至于并不习惯bootstrap的风格.近来考虑到easyui性能不太好,就用了bootstrap,先说下我所了解的bootstrap. 1.外国的框架用于显示中文看着总是不妥. 2.默认的样式觉得有些

本文转自:http://m.blog.csdn.net/blog/betreex/45649689 原文地址:Ionic最佳实践-使用模态窗口modal 模态窗口的结构 在Ionic中,模态窗口通过$ionicModal提供.他易于使用且非常强大,详细信息请参考$ionicModal文档.Ionic中的模态窗口可以使用模板字符串或URL创建.本文将使用URL. 模态窗口创建时绑定到一个scope,这个scope可以用来传递数据.然而,在更复杂的情况下,通过服务来访问共享数据是最好的做法. 制作模

有没有试过从一个集合里面移除一个对象之后,这个集合仍然留有这个对象?世界之大,无奇不有.稍有疏忽,便会导致这种奇怪的现象.现在让我们看看这个“不死”对象究竟是怎么一回事. 1.“不死”对象现身 这个问题起初是我一个同事提出的,为了重现“不死”对象,现把代码简化如下: // Code #01IList products = new List<Product>();products.Add(GetProduct("1412"));products.Remove(GetProdu

批量导入功能对于大部分后台系统来说都是不可或缺的一部分,常见的场景-基础数据的录入(部门,用户),用批量导入方便快捷.最近项目需要用到批量导入,决定花点时间写套比较通用的Excel导入功能.经过考虑,最终的实现需要达到 1.不同业务导入无需考虑npoi相关操作,只需要关注自己的业务逻辑,这里的业务逻辑最重要的两点(数据校验和数据保存)  2.导入异常(模板不匹配,数据填写错误...),提醒信息准确精细,达到帮助用户修正数据的目地 在线体验地址:http://tm.myscloud.cn:9000

(function () { //check the class name , it will be replaced when existed if (window.IQCBase) { //return window.IQCBase; //window._IQCBase = window.IQCBase; } //constructor window.IQCBase = function (param) { param = param instanceof Object ? param :

Ionic中弹窗有两种ionicModal和ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用JavaScript设定对话框的一些参数,通常用于通知消息.确认等作用: 案例: 1 angular.module('testApp', ['ionic']) 2 .controller('MyController', function($scope, $ionicModal) { 3 $ionicModal.fromTemplat

npoi批量导入实现及相关技巧 批量导入功能对于大部分后台系统来说都是不可或缺的一部分,常见的场景-基础数据的录入(部门,用户),用批量导入方便快捷.最近项目需要用到批量导入,决定花点时间写套比较通用的Excel导入功能.经过考虑,最终的实现需要达到 1.不同业务导入无需考虑npoi相关操作,只需要关注自己的业务逻辑,这里的业务逻辑最重要的两点(数据校验和数据保存)  2.导入异常(模板不匹配,数据填写错误...),提醒信息准确精细,达到帮助用户修正数据的目地 在线体验地址:http://tm.

准备工作 资源 预装工具 安装bower npm install -g bower 安装ngCordova bower install ngCordova (*由于网络获取资源的原因,后面几次建项目后都无法下载到,自己便复制了原来的ngCordova目录(到YourProject\wwww\lib目录下),发现也是可以使用的) 下载好后,在项目的index.hmtl进行引用: <script src="lib/ngCordova/dist/ng-cordova.js"> 日

Ionic中[弹出式窗口]有两种(如下图所示),$ionicModal和$ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用JavaScript设定对话框的一些参数,通常用于通知消息.确认等作用: 本文主要介绍IonicModal的使用方法 中文文档:http://ionicframework.net/docs/api/service/$ionicModal/ 英文文档:http://ionicframework.com/d

原文  http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framework.html 主题 Ionic Framework 介绍 自Hybrid Mobile技术发展以来,Web开发者转到移动开发的人数大大增加了. Hybrid Mobile开发技术使得一个Web开发者能够去开发一个运行在多个平台上的移动应用.完全不用去学习相应的平台语言和使用已经存在的技术. Hybr

ionicModal 可以遮住用户主界面的内容框. 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变). <script id="my-modal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1 class="title">My Modal title&l

引用 <!--1.引入 ionic css和js--> <!--2.定义ng-app--> <!--3.定义 angular.module('myAPp',['ionic']); 要依赖注入ionic--> <!--4.定义controller 和我们以前的angularjs一样去使用--> 指令 1. collection-repeat 是一个允许你渲染数千项列表,并且性能几乎不会减弱的指令.collection-repeat处理的数据必须是一个数组. &

为了上传预览pdf与图片特用此插件. 源码以及API地址: bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 一.效果展示 1.原始的i