vue组件iview中message实现不太理解

Question

问题

在看iview源码中message的实现，不是很理解没处下手，有大牛能疏导一下吗？

如：

this.$Message.success('This is a success tip');

这个的实现过程

iview官网
iview github

Answer 1

你不理解哪块？

整体实现是有一个v-for所有notice类的组件。你每调用一次就往里push一个。

---

1.success->message

// 几种方法最终都是调用message
success (options) {
    return this.message('success', options);
}

2.message-->notice

message(type, options){
        if (typeof options === 'string') {
            options = {
                content: options
            };
        }
        return notice(options.content, options.duration, type, options.onClose, options.closable);
    }

3.noitice-->getMessageInstance

function notice (content = '', duration = defaults.duration, type, onClose = function () {}, closable = false) {
    //...
    // 这个应该是拿实例
    let instance = getMessageInstance()
    // 这个应该是真正append到页面上
    instance.notice({
        
    });

    // 用于手动消除，返回值不用管
    return (function () {
    })();
}

4.getMessageInstance-->Notification.newInstance

function getMessageInstance () {
    // 复用？
    messageInstance = messageInstance || Notification.newInstance({
    });
    return messageInstance;
}

5.iview/src/components/base/notification/index.js

Notification.newInstance = properties => {
    const _props = properties || {};
    // 创建了一个统一v-for所有notice类的组件
    const Instance = new Vue({
        data: _props,
        render (h) {
            return h(Notification, {
                props: _props
            });
        }
    });

    const component = Instance.$mount();
    document.body.appendChild(component.$el);
    return {
        // 3里有调用notice()的一步
        notice (noticeProps) {
            // 调了组件的add，向v-for队列里加了一个，去notification.vue能看到
            notification.add(noticeProps);
        }
    };