实际使用iView的过程中,Modal可以说是出现频率相当高的组件之一,然而官方文档中提交的Modal内容可以是String类型,也可以是Element类型,但是对于如何使用Element并没有做详细的说明,所以这篇博客就是记录如何在使用我们自己的组件做为Modal的内容。
前言
首先上项目源代码: liumapp/custom-iview-modal
项目很简单,一个标准的Vue2.0项目,启动后就两个按钮:“only view”和”with form”。
“only view” button点击后会展示一个以自定义component为内容的Modal,并且输入一个json对象做为要展示的内容。
“with form” button点击后会展示一个由自定义component提供输入框的Modal,在其中输入内容时父组件能够时时获取最新的值。
其他类型的Modal就没有考虑,相信区别应该不大。
代码
直接上代码做分析应该是最有效果的讲解:
import modalDetail from './modalDetail.vue'
import formModal from './formModal.vue'
此处我们引入了两个自定义组件:modalDetail和formModal。
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components: {
modalDetail, formModal
},
methods: {
showView () {
this.$Message.info('only view modal showed');
this.$Modal.info({
scrollable: true,
render: h => {
return h(modalDetail, {
scrollable: true,
props: {
value: {
name: '张三',
sex: '男',
age: 16
}
}
});
}
})
},
only view button的点击事件,可以看到,我们在Modal中要引入一个自定义组件,需要使用render: h => h(app),相信很多小伙伴会疑惑,这个h是什么鬼?
这个东西是es6的语法,也就是说,这个render,vue在调用的时候,会把h的实参做为createElement函数,然后createElement再以我们的{….}做为参数,也就是创建一个h(formModal,….)并挂载到DOM树上,当然,这个里面又有一个h….不过没关系,大家把它当作createElement的高级版本就好…
withForm () {
this.$Message.info('modal with form showed');
this.$Modal.info({
scrollable: true,
render: h => {
return h(formModal, {
on: {
value1: (value1) => {
this.$Message.info('we get value1 from formModal ! and value is : ' + value1);
}
}
})
}
})
}
}
}
with form button的点击事件,可以看到,在formModal中通过$emit在输入框有输入时,触发父组件的value1方法。
以上。