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)

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

  1. 去掉网页中alert和confirm弹出框自带的网址

    去掉网页中alert和confirm弹出框自带的网址 Alert: <script> window.alert = function(name){ var iframe = documen ...

  2. vue 中使用 Toast弹框

    import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(ToastPlugin) Vue.use(ConfirmPlugi ...

  3. Vue自定义全局Toast和Loading

    如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件 ...

  4. Vue 中使用 extent 开发loading等全局 组件

    Vue 中使用 extend 开发组件 简介:再开发过程中那面会遇到自定义 loading alert 等全局组件,这里我们可以使用 vue 中的extend 来帮助我们完成 一个简单extend例子 ...

  5. vue中的toast组件

    首先在components新建组件文件夹 随后在toast.vue中写入弹框样式 <template> <transition name="demo"> & ...

  6. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

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

    1.ActionSheet 官方文档:https://ionicframework.com/docs/api/action-sheet <ion-header> <ion-toolb ...

  8. Bootstrap Modal 框 alert confirm loading

    /** * Created by Administrator on 2016/5/4. */ /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div ...

  9. Android线程中使用Toast、dialog、loading

    代码改变世界 Android线程中使用Toast.dialog.loading Loading: Thread t1 = new Thread(new Runnable() { @Override p ...

随机推荐

  1. 次短路——Dijkstra

    传送门 ——在LYC大佬的帮助下过了这道题 思路: LYC大佬的博客里已经讲得很清晰了,我只是提一下要点. 求次短路,主要考虑两个方面: ①在不重复走一条路的前提下,把最短路的其中一段替换为另一段. ...

  2. P2512 [HAOI2008]糖果传递

    题目描述 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. 输入输出格式 输入格式: 小朋友个数n 下面n行 ai 输出格式: 求使所有人获得均等糖果 ...

  3. P1031 均分纸牌

    题目描述 有N堆纸牌,编号分别为 1,2,…,N1,2,…,N.每堆上有若干张,但纸牌总数必为N的倍数.可以在任一堆上取若干张纸牌,然后移动. 移牌规则为:在编号为1堆上取的纸牌,只能移到编号为2的堆 ...

  4. VC异常.简单抛,简单捕获

    1.ZC:始终没有找到,能像Delphi7里面那样能抛 字符串描述 的异常信息.(难道Delphi是这样做的?:在程序的最外围 套了一层异常捕获,然后在获取到异常之后,自己再将异常信息弹出来,我们写的 ...

  5. java高并发解决方案

    高并发的解决方法有两种: 1.使用缓存 2.使用生成静态页面: (代码质量,不要性能低下的sql和代码.有的一条sql搞定的事,有人用了多个循环才能搞定.取决于程序员的经验!(还有就是从最基础的地方优 ...

  6. Pandas存储为Excel格式:单个xlsx文件下多sheet存储方法

    Notes If passing an existing ExcelWriter object, then the sheet will be added to the existing workbo ...

  7. stm32cube使用

    1.使用stm32cube生成CAN代码注意事项: a.需要手动配置CAN过滤器 { CAN_FilterConfTypeDef sFilterConfig; uint32_t filterID = ...

  8. 线程---local数据隔离

    线程之间本身是数据共享的,当多个线程同时修改一份数据的时候,数据就可能不 准确,特别是线程量特别大的时候,为了保证数据准确性: (1) 通过线程锁Lock (2)通过local数据隔离 from th ...

  9. Python 编程快速上手 第六章总结

    第六章 字符串操作 前言 这一章节讲了关于 Python 中字符串类型的知识.与字符串有关的操作符,方法等等. 处理字符串:字符串的写入.打印.访问的知识 原始字符串 格式:r'string'作用:在 ...

  10. 转录调控实战 | 一文解决转录调控问题 | chIP-seq | ATAC-seq

    做生物的想发文章怎么办?转录调控来解析(huyou)! 最简单的情形: 1. 我在研究一个非常重要的基因A,功能已经做得差不多了,现在想深挖,第一步就是想知道哪个转录因子调控这个基因A: 2. 我发现 ...