0%

自定义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方法。

以上。