自定义 iView 的 Modal 组件

实际使用 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 方法。

以上。