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-12-16 22:04:03

    基于本地代理的边下边播技术分析

    我们熟知的边下边播技术,是迅雷提供的,还有之前的快播、快车等工具,它们使用的技术基本上都是P2P下载技术。 P2P下载技术,本质上它并不是C-S的架构,P2P----> Peer to Peer,实际上它将各个客户端的资源调度起来,给上传资源种子,方便后续的下载者可以快速有效的下载资源,这种方式需要服务器整合各个Client,在有用户需要下载的情况下,服务器能及时调度资源,开始给下载者提供资源信息,保证下载者下载资源越快越好。P2P的下载方式后面我们专门介绍一下。这儿不继续展开了。

  • 2020-12-16 22:07:44

    Android视频点播-边播边缓存

    一些知名的视频app客户端(优酷,爱奇艺)播放视频的时候都有一些缓存进度(二级进度缓存),qq,微信有关的小视频,还有一些短视频app,都有边播边缓的处理。还有就是当文件缓存完毕了再次播放的话就不再请求网络了直接播放本地文件了。既节省了流程又提高了加载速度。 今天我们就是来研究讨论实现这个边播边缓存的框架,因为它不和任何的业务逻辑耦合。

  • 2020-12-16 22:46:44

    基于coturn项目的stun/turn服务器搭建

    webrtc是google推出的基于浏览器的实时语音-视频通讯架构。其典型的应用场景为:浏览器之间端到端(p2p)实时视频对话,但由于网络环境的复杂性(比如:路由器/交换机/防火墙等),浏览器与浏览器很多时候无法建立p2p连接,只能通过公网上的中继服务器(也就是所谓的turn服务器)中转。示例图如下:

  • 2020-12-16 23:06:05

    Rocket.Chat推送信息

    Rocket.Chat推送消息 Rocket.Chat是一个开源实时通讯平台, 支持Windows, Mac OS, Linux. 支持聊天, 文件上传, 视频通话, 语音通话功能. 向Rocket.Chat推送消息 以下示例可以转为别的语言的版本, 本示例使用Linux平台的curl测试, curl非常强大. 登陆 首先需要登陆Rocket.Chat服务器

  • 2020-12-17 09:01:23

    对BitTorrent Tracker源码分析

    tracker服务器是BT下载中必须的角色。一个BT client 在下载开始以及下载进行的过程中,要不停的与 tracker 服务器进行通信,以报告自己的信息,并获取其它下载client的信息。这种通信是通过 HTTP 协议进行的,又被称为 tracker HTTP 协议,它的过程是这样的: client 向 tracker 发一个HTTP 的GET请求,并把它自己的信息放在GET的参数中;这个请求的大致意思是:我是xxx(一个唯一的id),我想下载yyy文件,我的ip是aaa,我用的端口是bbb。。。

  • 2020-12-17 10:55:48

    html5 video p2p research

    节约带宽,减少缓冲时间,提升服务质量,处理峰值流量, 视频观看的人越多,播放越流畅。

  • 2020-12-17 10:57:34

    使用 MediaSource 搭建流式播放器

    Media Source Extensions(媒体源扩展)大大地扩展了浏览器的媒体播放功能,提供允许JavaScript 生成媒体流。这可以用于自适应流(adaptive streaming,也是我毕设的研究方向)及随时间变化的视频直播流(live streaming)等应用场景。