Vue 添加全局Toast和Confirm

2020-11-26 08:41:36

vue添加全局Toast和Confirm

var common = {
        Toast: function (msg = 'tip', callback, timeout = 2000) {
            let LoadingTip = Vue.extend({
                template: `<div class="toast-con"><div class="info"><span>${msg}</span></div></div>`
            })

            // 2、创建实例,挂载到文档以后的地方
            let tpl = new LoadingTip().$mount().$el
            // 3、把创建的实例添加到body中
            document.body.appendChild(tpl);

            setTimeout(function() {
                document.body.removeChild(tpl);
                callback && callback();
            },timeout);
        },

        Confirm: function (title='提示', content, callback) {
            let LoadingTip = Vue.extend({
                template: `<div class="toast-con"></div>`
            })

            // 2、创建实例,挂载到文档以后的地方
            let tpl = new LoadingTip().$mount().$el
            // 3、把创建的实例添加到body中
            document.body.appendChild(tpl);

            setTimeout(function () {
                document.body.removeChild(tpl);
                callback && callback();
            }, timeout);
        },
        UrlEncode: function (data = {}) {
            var datastr = Qs.stringify(data);
            return LZString.compressToBase64(datastr);
        },
        UrlDecode: function (data = "") {
            var datastr = LZString.decompressFromBase64(data);
            return datastr==null?null:Qs.params(datastr);
        }
    }

    Vue.prototype.common = common;


vue 怎么去使用全局Toast 和Confirm

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(‘关闭了’);});
            },
        }
    });


  • 2020-11-22 23:27:28

    dagger学习教程

    dagger android 学习(一):dagger基础使用 dagger android 学习(二):AndroidInjector的使用 dagger android 学习(三):ContributesAndroidInjector的进一步优化 dagger android 学习(四):基于dagger2的mvp架构

  • 2020-11-22 23:31:22

    Dagger2与AndroidInjector详解

    相信使用过Dagger开发Android应用的小伙伴会知道(如果你还不是很了解Daager,可以先看我之前的一篇基本介绍:Dagger2使用攻略),我们会在Activity或Fragment的生命周期方法中执行成员注入。比如这样:

  • 2020-11-23 08:52:59

    asm.js 和 Emscripten 入门教程

    asm.js 就是为了解决这两个问题而设计的:它的变量一律都是静态类型,并且取消垃圾回收机制。除了这两点,它与 JavaScript 并无差异,也就是说,asm.js 是 JavaScript 的一个严格的子集,只能使用后者的一部分语法。

  • 2020-11-23 09:11:07

    爬虫——记一次破解前端加密详细过程

    从最初使用webdriver+selenium爬虫到现在利用http请求解析html,经历过各种各样的问题,webdriver+selenium这种办法虽然万能,而且可以用JS写解析脚本方便调试,

  • 2020-11-24 19:18:43

    nuxtjs打成用于webview的相对路径

    路径为绝对路径,当项目的域名为二级域名的时候,就不能打包为这绝对路径了。 nuxt不同于vue项目,思索了许久,终于找到了配置的地方

  • 2020-11-24 23:22:59

    eruda,移动端网页调试神器

    webapp或者移动端网页需要嵌入到app时候,尤其是在APP内置的webView上加载我们的页面,想要查看手机浏览器信息是非常困难的事,当出现问题的时候,你又不能查看日志,一般会连接本地测试环境,然后在alert来打印日志