Vue.js实现toast的一点问题

Question

网上看的代码，实现一个loading toast；但是其中一部分代码不懂。估计是基础不扎实。。。想请求大佬们讲解下；

 //这一部分在原型中定义这个loading函数我是理解的
 Vue.prototype.$loading = function (tips, type) {
    if (type == 'close') {
        loadNode.show = showLoad = false;
    } else {
        if (showLoad) {
            // 如果loading还在，则不再执行
            return;
        }
        var loadTpl = Vue.extend({
            data: function () {
                return {
                    show: showLoad
                }
            },
            template: `<div v-show="show" class="lx-load-mark">

<div class="lx-load-box"><div class="lx-loading">
<div class="loading_leaf loading_leaf_0"></div>
<div class="loading_leaf loading_leaf_1"></div>
<div class="loading_leaf loading_leaf_2"></div>
<div class="loading_leaf loading_leaf_3"></div>
<div class="loading_leaf loading_leaf_4"></div>
<div class="loading_leaf loading_leaf_5"></div>
<div class="loading_leaf loading_leaf_6"></div>
<div class="loading_leaf loading_leaf_7"></div>
<div class="loading_leaf loading_leaf_8"></div>
<div class="loading_leaf loading_leaf_9"></div>
<div class="loading_leaf loading_leaf_10"></div>
<div class="loading_leaf loading_leaf_11"></div>
</div><div class="lx-load-content">${tips}</div>`

        });
        loadNode = new loadTpl();
        var tpl = loadNode.$mount().$el;
        document.body.appendChild(tpl);
        loadNode.show = showLoad = true;
    }
};

// 这一部分我不理解，这是等于给loading又拓展加上了一个方法吗，因为我在其他地方看到如下使用(如下图片中)；
['open', 'close'].forEach(function (type) {
    Vue.prototype.$loading[type] = function (tips) {
        return Vue.prototype.$loading(tips, type)
    }
});

这里在 closeLoading方法中调用了 this.$loading.close();
所以不懂上面那部分代码怎么做的；啥功能

Answer 1

我看了你的问题.

首先你要先清除绑定vue的组件是通过全局的 在

vue.prototype

上面绑定的全部变量.也就是说在还没调用组件之前已经自己的组件绑定到全局vue对象里面了.

Vue.prototype.$loading = function (tips, type) {}
['open', 'close'].forEach(function (type) {
    Vue.prototype.$loading[type] = function (tips) {
        return Vue.prototype.$loading(tips, type)
    }
});

这里其实只绑定了 $loading到vue 对象中.
但是你可以把 $loading 看成一个「函数对象」
其实也是对象,不过它拥有

 Vue.prototype.$loading['open']  = function(){}
 Vue.prototype.$loading.['close'] = function(){}

这两个属性都是方法.

---

然后是实践一下:
打印这两种的区别先看看。

    this.$loading('不得了');   -> 1
    this.$loading.open('不得了'); -> 2 

这两种用法完全一样
第一种直接调用的是这里的方法:

  Vue.prototype.$loading = function (tips, type) {
        tips=> '不得了'
        type=> 不存在默认 走「显示」的流程


 } 

第二种则是先调用

 Vue.prototype.$loading['open']  = function(){}

然后return 再调用

 return Vue.prototype.$loading('不得了', 'open')

=> Vue.prototype.$loading = function (tips, type) {
        tips=> '不得了'
        type=> 存在 'open'

 } 

所以最关键是要理解下面这个代码做了什么？
其实这里是用了es6 的定义对象的属性,而这个属性是个方法.

  Vue.prototype.$loading[type] = function (tips) {
        return Vue.prototype.$loading(tips, type)
    }

Answer 2

这里不是有

 if (type == 'close') {
        loadNode.show = showLoad = false;
    } else {

下面这个就相当于Vue.prototype.$loading.close() = Vue.prototype.$loading(tips, 'close ');

  Vue.prototype.$loading[type] = function (tips) {
        return Vue.prototype.$loading(tips, type)
    }