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-03-11 21:22:36

    Vue的组件化之notification组件/Vue.extend()

    一、把组件的内部结构写好,写成一个vue文件notification.vue。 二、全局设置组件属性。//如果后面不需要直接引入组件的方式调用,可以不用全局注册 index.js中一般写的是需要全局设置的属性。

  • 2020-03-13 19:58:19

    推荐Android两种屏幕适配方案

    在Android开发中,由于Android碎片化严重,屏幕分辨率千奇百怪,而想要在各种分辨率的设备上显示基本一致的效果,适配成本越来越高。虽然Android官方提供了dp单位来适配,但其在各种奇怪分辨率下表现却不尽如人意,因此下面探索一种简单且低侵入的适配方式。本文将推荐两种屏幕适配方案,大家可以根据实际情况使用。

  • 2020-03-14 16:35:00

    nuxt.js部署全过程(ubuntu+nginx+node+pm2)

    系统的话本篇是Ubuntu 16.04.6 ,centos也行,大同小异都是Linux。不过如果你是初学者,最好和我使用一样的,因为因为发行版本不同而导致的差异可能导致运行某些东西失败,找问题要找好久。windows server不推荐了,企业用的多,小服务器跑windows server比较费劲。

  • 2020-03-14 23:15:25

    icomoon使用详细介绍

    此篇博文讲述如何利用icomoon导入图标,从而把自己想要的都通过icomoon方式进行,大家都知道,网站以及移动端,用图标还是尽量选择这种。因为直接用image有些图标会失真,从而也是前端开发之中,需求去掌握的一项,很简单的就几个步骤。