import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux'

Vue.use(ToastPlugin)
Vue.use(ConfirmPlugin)
Vue.use(AlertPlugin)
 
//公用的弹窗(全局变量)
Vue.prototype.showToast = function( showPositionValue,type,text,width="10em"){
this.$vux.toast.show({
showPositionValue: false,
text: text,
type: type,
width: width,
position: 'middle'
})
}
//公用alert confirm
const Message = {};
Message.install = () => {
const msg = {
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();
}
})*/
}, }
Object.entries(msg).forEach(([method,fn]) => {
Vue.prototype[method] = fn;
})
}
Vue.use(Message)
//使用例子
_this.confirm({
title:'提示',
content: '确定要关闭订单',
onConfirm() {
console.log('取消订单了');
}
});

vue 中使用 Toast弹框的更多相关文章

  1. 在vue中引入layer弹框的简易方法

    npm i --save layui-layer 2.在main.js中引入 import layer from "layui-layer"; 3.然后就可以在各个组件中使用lay ...

  2. 制作一个简单的toast弹框

    toast弹框的作用 toast弹框顾名思义,就是为了弹出一个提示框,效果如图: 使用toast弹框可以可用户带来更好的交互体验 toast弹框的使用 Toast组件 制做出toast的样式以及出现的 ...

  3. vue编辑、新增弹框(引用外部页面)

    vue编辑.新增弹框(引用外部页面) 2018年06月15日 09:37:20 会飞的猪biubiu 阅读数 10265    版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...

  4. 使用appium框架测试安卓app时,获取toast弹框文字时,前一步千万不要加time.sleep等等待时间。

    使用appium框架测试安卓app时,如果需要获取toast弹框的文案内容,那么再点击弹框按钮之前,一定记得千万不要加time.sleep()等待时间,否则有延迟,一直获取不到: 获取弹框的代码: m ...

  5. vue项目中使用vue-layer弹框插件

    vue-layer弹框插件  安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = lay ...

  6. vue中的toast组件

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

  7. selenium中遇到div弹框,一起引申到其他弹框

    1.div弹框和DOM普通元素一样处理 2.出现一下就自动消失的弹框,也是在DOM中有描述的,可以使用xpath,用其内容定位 3.(转,其他弹框处理,包括alert和不同windows) https ...

  8. 在wpf中使用winrt的Toast弹框效果

    源码地址:https://code.msdn.microsoft.com/windowsdesktop/Sending-toast-notifications-71e230a2/sourcecode? ...

  9. vue中alert toast confirm loading 公用

    import Vue from 'vue' import { ToastPlugin, AlertPlugin, ConfirmPlugin, LoadingPlugin } from 'vux' / ...

随机推荐

  1. strtotime 获取之前,之后时间

    一年之前 <?php echo strtotime('-1 year'); ?> 一年之后 <?php echo strtotime('+1 year'); ?> 一月之前 & ...

  2. Spring @Configuration 和 @Bean 注解

    @Configuration 和 @Bean 注解 带有 @Configuration 的注解类表示这个类可以使用 Spring IoC 容器作为 bean 定义的来源.@Bean 注解告诉 Spri ...

  3. 简单理解Hadoop架构原理

    一.前奏 Hadoop是目前大数据领域最主流的一套技术体系,包含了多种技术. 包括HDFS(分布式文件系统),YARN(分布式资源调度系统),MapReduce(分布式计算系统),等等. 有些朋友可能 ...

  4. asp.net 虹软人脸识别sdk 释放内存

    初始化时申请内存,用完记得释放,不然就会报“内存已满”的. 使用时: pMem = Marshal.AllocHGlobal(detectSize); 释放内存: Marshal.FreeHGloba ...

  5. eclipse 配置打开工作空间

    转载自: https://www.cnblogs.com/qq1871707128/p/6093860.html 首先得有eclipse 一.在eclipse的菜单栏中点击 Run -->Ext ...

  6. 牛客国庆集训派对Day3 A Knight

    Knight 思路: bfs打表找规律 如下图 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) ...

  7. Mac python Tesseract 验证码识别

    Tesseract 简介 Tesseract(/'tesərækt/) 这个词的意思是"超立方体",指的是几何学里的四维标准方体,又称"正八胞体".不过这里要讲 ...

  8. python+selenium2(二)

    看完第一个程序,可能有不懂得地方,里面有定位元素的方式,之后会具体介绍定位的方式.这一篇介绍下对浏览器的操作. (1)浏览器的最大化   有点问题, Message: unknown error: c ...

  9. 雷林鹏分享:jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

  10. 皮尔逊残差 | Pearson residual

    参考:Pearson Residuals 这些概念到底是写什么?怎么产生的? 统计学功力太弱了!