自定义iView的Modal组件 有更新!

Published on in 前端 with 3,544 views

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

以上。

Responses