博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iView实现自定义Modal
阅读量:5890 次
发布时间:2019-06-19

本文共 863 字,大约阅读时间需要 2 分钟。

Modal组件是iView库中较常用的一个,而如何利用render实现一个自定义的Modal在官方wiki中并没有详细说明。我在这里将举例说明:

所谓自定义内容,是指使用一个自定义的组件作为Modal框的内容。在我的实例中,我使用的内容组件包含有两个Input组件,用于实现两个变量的输入。

自定义组件add.vue

在这个组件中,为两个Input组件分别定义on-change事件的方法。只要value1的值或者value2的值发生变化,就会向父组件emit对应的事件value1和value2。

父组件content.vue

在父组件中,引入自定义内容组件add(注意:箭头函数中组件为 add 而不是 'add' ),并监听事件value1和value2,及时为data中v1和v2赋值。若在此过程中父组件有需要传递给内容组件的参数,需要在props中填入。

onOk项后定义触发模态框中ok按钮的回调函数。本例中是检查input中输入的值是否为空,并在接口中上传数据。

这样,iView中一个自定义Modal就通过render方法实现了。

最近做了个项目,采用前后分离的模式,而前端使用了iView。作为一个后端程序员,遇见了不少坑,项目上线后我会把我解决的问题总结下,陆续写成文章。既方便自己查看,也希望可以帮助到跟我一样的"小白"。

个人新项目上线后,我会push到。希望大家可以体验下,给我点建议,如果能给个star最好不过了。

转载地址:http://iqfsx.baihongyu.com/

你可能感兴趣的文章
day19 反射
查看>>
新闻快讯_2
查看>>
常见电商项目的数据库表设计(MySQL版)
查看>>
JS的document.all函数使用示例
查看>>
Spring配置之OpenSessionInViewFilter
查看>>
pixel2坑
查看>>
20135337朱荟潼 Linux第三周学习总结 ——Linux内核源代码简介
查看>>
开源工具、平台列表
查看>>
oracle 字段类型
查看>>
linux 内存布局以及tlb更新的一些理解
查看>>
C语言最后一次作业--总结报告
查看>>
wpf 自动完成comboxBox
查看>>
Android Studio 使用Lambda
查看>>
jquery用Ajax中的回调函数时注意事项
查看>>
iBatis.Net系列(九)-动态sql
查看>>
day11 作用域
查看>>
asyncio python中的异步IO处理模块
查看>>
CentOS 漏洞修补
查看>>
BZOJ2152:[国家集训队]聪聪可可(点分治)
查看>>
Systemverilog for design 笔记(四)
查看>>