vue中alert toast confirm loading 公用

import Vue from ‘vue‘

import { ToastPlugin, AlertPlugin, ConfirmPlugin, LoadingPlugin } from ‘vux‘

/*import { Promise } from ‘es6-promise‘;*/

Vue.use(ToastPlugin)

Vue.use(AlertPlugin)

Vue.use(ConfirmPlugin)

Vue.use(LoadingPlugin)

const Message = {};

Message.install = () => {

    const msg = {

        $toast: config => {

            let def = {

                type:‘text‘,

                text:‘‘

            }

            if(typeof  config  === ‘string‘ || typeof  config  === ‘number‘){

                Vue.$vux.toast.show({type:‘text‘,text:config})

            }else{

                Vue.$vux.toast.show(Object.assign(def,config))

            }

        },

        $alert: config => {

            let def = {

                title:‘提示‘,

                content:‘系统异常,请重新登录后再试!‘,

                buttonText:‘确定‘

            }

            if(typeof  config  === ‘string‘ || typeof  config  === ‘number‘){

                Vue.$vux.alert.show(Object.assign(def,{content:config}));

            }else{

                Vue.$vux.alert.show(Object.assign(def,config));

            }

        },

        $confirm: config => {

            let isConfirm = false;

            let def = {

                title:‘提示‘,

                content:‘系统异常,请重新登录后再试!‘,

                confirmText:‘确定‘,

                cancelText:‘取消‘,

                onConfirm:() =>{

                    isConfirm = true;

                }

            }

            if(typeof  config  === ‘string‘ || typeof  config  === ‘number‘){

                Vue.$vux.confirm.show(Object.assign(def,{content:config}));

            }else{

                Vue.$vux.confirm.show(Object.assign(def,config));

            }

            /*return new Promise((resolve,reject) => {

                if(isConfirm){

                    resolve();

                }

            })*/

        },

        $showLoading: config => {

            let def = {

                text: ‘加载中...‘

            }

            if(typeof  config  === ‘string‘ || typeof  config  === ‘number‘){

                Vue.$vux.loading.show(Object.assign(def,{text:config}));

            }else{

                Vue.$vux.loading.show(Object.assign(def,config));

            }

        }

    }

    Object.entries(msg).forEach(([method,fn]) => {

        Vue.prototype[method] = fn;

    })

}

Vue.use(Message)

时间: 2024-10-10 11:55:16

vue中alert toast confirm loading 公用的相关文章

vue中自定义组件(插件)

vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: 1.首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如: <template> <div> loading.............. </div

Ionic4.x Javascript 扩展 ActionSheet Alert Toast Loading 以及 ionic 手势相 关事件

1.ActionSheet 官方文档:https://ionicframework.com/docs/api/action-sheet <ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button defaultHref="/tabs/tab1"></ion-back-button> </ion-buttons> &

UIWebView 自定义网页中的alert和confirm提示框风格

.h #import <UIKit/UIKit.h> @interface UIWebView (JavaScriptAlert) -(void)webView:(UIWebView *)sender runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WebFrame *)frame; -(BOOL)webView:(UIWebView *)sender runJavaScriptConfirmPa

Bootstrap Modal 框 alert confirm loading

/** * Created by Administrator on 2016/5/4. */ /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog modal-sm" role="document" s

vue中引入Tinymce富文本编辑器

最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件夹中加入如下几个文件 首先看一下Tinymce/dynamicLoadScript.js的内容: let callbacks = [] function loadedTinymce() { // to fixed https://github.com/PanJiaChen/vue-element-a

Selenium2学习-040-JavaScript弹出框(alert、confirm、prompt)操作演示实例

弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert.html 示例代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&g

自己编写jQuery插件 之 模拟alert和confirm

啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了... 来看插件的实现代码吧: (function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, msg); btnOk(); //alert只是弹出消息,因此没必要用到回调函数callback btnNo(); }, Confirm: fun

vue中简单的小插曲

我们现在来学习一下vue中一些简单的小东西: 首先我们必须要引入vue.js文件哦! 1.有关文本框里的checkbox js代码: new Vue({ el:"#app", data:{ mag:" " } }) html代码: <div id="app"> <input type="checkbox" v-model="mag"> <h1>{{mag}}</h1

vue中watch的使用

vue中watch的使用 vue中的watch是一个比较重要的概念,通过他我们可以检测data的变化,下面进行详细的介绍. watch定义方式如下: {[key: string]: string | Function | Object } 即在watch中, 键是一个字符串,它是被观测的对象. 值可以是一个字符串,这个字符串是方法名. 值还可以是一个函数,但不能使用箭头函数的形式,this会出现问题. 值也可以是一个对象,其中包含回调函数可以其他一些选项:比如是否深度遍历. 举例如下: <!DO