iview Modal 坑

  • 2024-11-04

记一次开发过程中，iview遇到的一些坑以及解决办法

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

iview modal 弹框 模板

iview modal 弹框 模板 <!-- * @description 上传图片 * @fileName camera.vue * @author 彭成刚 * @date // :: * @version V1.0.0 !--> <template> <div> <Modal @on-cancel="modalCancel" class="uploadPhoto" v-model="modalVmodel&qu

微信小程序之mpvue+iview踩坑之旅

因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mpvue.com/mpvue/#_2的官网的五分钟的教程搭建项目 在创建的过程中,需要输入微信小程序的个人appId,可以去微信小程序开发平台复制进去. 创建完成后的项目其实和使用vue-cli创建的脚手架大同小异,没图案也只是对其封装,然后转化为wxml. 1.首先引进iview weapp的组件库

iview 踩坑之旅

公司重构管理系统,框架定了vue,UI在element和iview之间选,element样式被吐槽丑,于是选了iview,但是,,这个坑多啊... 废话少说,罗列了iview中容易出错或者懵逼的一些地方,希望后来的老哥们少费点头发. #环境:vue-2.5, iview-3.0.1# 避免你浪费时间,先列出要点: 1,重置表单: 2,校验表单: 3,  Table相关: 4,select相关. 1,重置表单 1)单独重置某一项: 1 2 3 4 5 this.$refs[name].fields

iview modal对话框的一个小知识点

我在做一个项目的一个页面的时候有两个弹窗,发现点击一个弹窗的右上角关闭按钮后,打开另一个弹窗的时候,另一个弹窗里面带有上一个弹窗里的样式内容,说明上一个弹窗并没有被销毁. 后来发现modal源码里的confirm.js文件内加入这段代码进行弹窗组件的销毁,就可以解决这个问题.记录下来

iview modal 点击打开窗口，打开前先销毁里面的内容再打开

<Modal v-model="addSubOrgModal" @on-cancel="addSubOrgCancel" @on-visible-change="orgOnVisibleChange" width=" :mask-closable="false" title="新增下级机构"> <org-form ref="orgFormAdd" v-if=&

Iview Modal 点击确定就关闭，我想禁止关闭该怎么办呢？

网上各种loading,不推荐.用下面的方法直接就解决了 <div slot="footer"> <Button type="text" size="large" @click="cancel()">取消</Button> <Button type="primary" size="large" @click="modifyOk('use

清空表单方法 清空变量 iview modal

方法一 通过json序列号和反序列号 清空一次数据 数据需要copy出来一份 orgFormClearAllInput () { this.$refs.n1.formValidate = JSON.parse(JSON.stringify(this.$refs.n1.formValidate2)) }   方法二 clearFormData () { let form = { b0111: '', b0101: '', b0104: '', b0117: '', b0124: '', b0131

vue iview modal弹出框 form表单验证

一.ref="addApply" :model="addApply" :rules="ruleValidate"   不要忘记prop 二.规则 三. _createApply(name){ this.$refs[name].validate((valid) => { if (valid) { let addApply = Object.assign({},this.addApply) addApply.serviceEndDate = f

基于 Vue.js 之 iView UI 框架非工程化实践记要

像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多.再者,我不用 MVVM 模式,领导也不会扣绩效. 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架. V

shit vue & shit iview

shit vue & shit iview <Switch> !== <i-switch> https://www.iviewui.com/components/switch <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" cont

基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core，如何

基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多.再者,我不用 MVVM 模式,领导也不会扣绩效. 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选

关于iview下拉菜单无法添加点击事件的解决办法

效果如下图所示,点击下拉菜单,点击退出,然后跳到登录界面 代码如下: <Dropdown trigger="click" style="margin-left: 20px;"> <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /> <DropdownMenu slot="list"> <DropdownItem

IView入门练习~CDN模式全局加载JS

关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 高质量.功能丰富 友好的 API ,自由灵活地使用空间 细致.漂亮的 UI 事无巨细的文档 可自定义主题 以上内容乃是摘抄官网介绍,懒的写,以下代码以记录最近学习的一些问题解决,IViewUI入门练习~CDN模式全局加载JS,值得注意的地方是,由于CDN模式与NPM 安装模式,在HTML中写入还是有一定的区别的,例如写一个日期控件: //CDN模式加载 <Row style=

如何在require中使用VUE

现在网上抄的沸沸扬扬的VUE看来是个很NB的东西啊,看了一下,确实相对于angular1来说简化了不少东西,性能方面也比angular1要好很多,所以现在用的人越来越多了,于是作为前端,学习一下新东西不至于被淘汰那是必须的~在网上看了一下,感觉还不错,打算用它写个单页面应用.于是--坑就跟着来了-- 首先声明本人不会webpack和es6但是看了一下网上用VUE写单页面程序的基本上都是用的webpack和ES6,他大爷的!这就有点欺负人了!不会什么非用什么?就不能做一个简简单单的前端吗?非要用什

UI 框架

Vue.js 之 iView UI 框架 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多.再者,我不用 MVVM 模式,领导也不会扣绩效. 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及

vue组件中，iview的modal组件爬坑--modal的显示与否应该是使用v-show

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

[技术博客]iview组件样式踩坑记录

[技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注意到的小坑,这里总结一下分享给大家. 一.iview组件的特殊使用 各个组件的基本用法在官方文档中已经给出,这里总结一些官方文档并没有仔细说明的组件的特殊用法. 1.部分可以动态展开的组件(如下拉菜单)在展开时,被页面中其他元素遮挡问题. 解决方法:使用transfer属性(仅对iview组件有效)

iview中Modal弹窗做form表单验证相关问题

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

iView页面Modal中内嵌Tabs，重新显示Modal时默认选中Tabs的第一项

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

热门专题

webstorm 正则批量替换
按层打印二叉树 go语言
echars柱状图动态修改配置
系统保护添加 你不能在64位可执行文件上设置DEP属性
isis csnp丢失
visual studio 开发扩展功能 注释
linux将jar包安装到maven仓库,应该是有命令的
c#怎么让程序每隔一段时间执行一次
centos7将sda2下的分区增加到根分区
1231v3可以装几个虚拟机
el form里面内容无法修改
esp8266wifi杀手和钓鱼
深度学习loss有单位吗
list 去掉特定值的元素
对‘TIFFIsTiled@LIBTIFF_4.0’
SAP Function 传输range表
torBorwser官网
python 模拟 post
jpa获取全部数据添加额外字段
systick 中断函数名重定义了