vue-iview Modal组件简单分析

vue-iview Modal组件简单分析

vue-iview Modal组件简单分析

现在公司的项目前端框架用的是vue，在工作中避免不了要写一些组件，其实写组件的方法千千种，怎么写都行，但是，总想写出来的组件像一些ui框架里的组件一样高大上，于是乎，今天有点时间，大致的看了一下iview的Modal组件，简单的记录一下思想。
由于时间原因，代码并没有深入往里边看，只是把大致的框框看了一下。
首先，我们看看Modal组件的用法，官方文档点这里
简单的用法如下：

<Modal v-model="modal12" draggable scrollable title="Modal 1">
    <div>This is the first modal</div>
</Modal>
// 上边这个是基础写法
// 下边这个写法可以直接调用，不需要在html中写出<Modal></Modal>标签
this.$Modal.info(config)
this.$Modal.success(config)

先看一下iview的Modal组件文件夹结构

index文件是入口文件，里边导出了Modal对象。也就是可以使用标签的原因，因为给Modal对象加一大堆方法，但是它还是一个vue的基础组件。大家可能注意到了，当使用标签定义组建的时候，发现最后组件的dom元素被插入到了body下，而不是在具体引入的位置，这是因为Modal组件里有一个指令：

//  Modal组件里有
directives: { TransferDom }
// 追溯TransferDom指令，发现有如下代码
parentNode.replaceChild(home, el); // moving out, el is no longer in the document
getTarget(value).appendChild(el); // moving into new place

modal.vue文件是组件的基础文件，也就是页面显示出来的东西，index文件里的东西可以看出来，只是给Modal对象添加了一些静态方法，为了this.$Modal.info(config)这样调用的时候使用。
confrim文件里主要做了this.$Modal.info()这样调用的时候动态new Vue()实例，也是以modal.vue这个组件为基础，动态的插入到body节点里，代码见下边:

就是通过new Vue()的实例获取到这个组建的html代码片段，再插入到body节点中。
最后，再看看iview如何变成vue的全局组件的。

const install = function(Vue, opts = {}) {
    
    ...

    // 这里添加全局组件
    Object.keys(iview).forEach(key => {
        Vue.component(key, iview[key]);
    });

    ...

    // 这里添加实例方法
    Vue.prototype.$Modal = Modal;
    
};

以上就是大概思路哈。