Vue 添加全局Toast和Confirm 

 1 var common = {
 2         Toast: function (msg = 'tip', callback, timeout = 2000) {
 3             let LoadingTip = Vue.extend({
 4                 template: `<div class="toast-con"><div class="info"><span>${msg}</span></div></div>`
 5             })
 6 
 7             // 2、创建实例，挂载到文档以后的地方
 8             let tpl = new LoadingTip().$mount().$el
 9             // 3、把创建的实例添加到body中
10             document.body.appendChild(tpl);
11 
12             setTimeout(function() {
13                 document.body.removeChild(tpl);
14                 callback && callback();
15             },timeout);
16         },
17         
18         Confirm: function (title='提示', content, callback) {
19             let LoadingTip = Vue.extend({
20                 template: `<div class="toast-con"></div>`
21             })
22 
23             // 2、创建实例，挂载到文档以后的地方
24             let tpl = new LoadingTip().$mount().$el
25             // 3、把创建的实例添加到body中
26             document.body.appendChild(tpl);
27 
28             setTimeout(function () {
29                 document.body.removeChild(tpl);
30                 callback && callback();
31             }, timeout);
32         },
33         UrlEncode: function (data = {}) {
34             var datastr = Qs.stringify(data);
35             return LZString.compressToBase64(datastr);
36         },
37         UrlDecode: function (data = "") {
38             var datastr = LZString.decompressFromBase64(data);
39             return datastr==null?null:Qs.params(datastr);
40         }
41     }
42 
43     Vue.prototype.common = common;

 

调用

 var app = new Vue({
        el: '#app',
        data: {
            reason: '',
        },
        created: function () {
            var that = this;

        },
        methods: {
            submit: function () {
                var that = this;

                that.common.Toast('测试完毕',function(){console.log(‘关闭了’);});
                 that.common.Confirm('提示','确定要删除吗?',function(){console.log(‘关闭了’);});
            },
        }
    });

 

posted @ 2019-10-18 16:29  崔国亮  阅读(838)  评论(0)    收藏  举报