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. VS IIS Express 支持局域网访问

    使用Visual Studio开发Web网页的时候有这样的情况:想要在调试模式下让局域网的其他设备进行访问,以便进行测试.虽然可以部署到服务器中,但是却无法进行调试,就算是注入进程进行调试也是无法达到 ...

  2. nodejs项目安装ant design

    1.确保安装好nodejs $ node --version v10.4.1 2.确保npm $ npm -v 6.1.0 3.安装 $ sudo npm install antd-init -g / ...

  3. Java三种代理模式:静态代理、动态代理和cglib代理

    一.代理模式介绍 代理模式是一种设计模式,提供了对目标对象额外的访问方式,即通过代理对象访问目标对象,这样可以在不修改原目标对象的前提下,提供额外的功能操作,扩展目标对象的功能. 简言之,代理模式就是 ...

  4. hashtable详解

    hashtable也比称作哈希表,键值对或者关联数组 1. 先引用using System.Collections;命名空间 用于处理和表现key/value的键值对,其中key通常用来快速查找,同时 ...

  5. 学习笔记39—笑谈FireFox标签不同步(IOS和Wiindows)

    为了解决国内用户连接 全球同步服务器 困难的问题,火狐中国版推出了 全球服务 和 本地服务 两套服务. 这两套服务的账号和数据并不通用,并且只有中国版提供了切换功能,因此当你在同步过程中遇到“未知账号 ...

  6. 关于datatables自适应以及自定义列宽度的总结

    table-layout:fixed;可以自定义列的宽度 <div id="bizhi" style="width:100%;height: 85%;overflo ...

  7. 历次PCB板修改意见汇总

    历次PCB板修改意见汇总: 1 对于主控芯片,建议参考官方的PCB布局,官方的PCB布局肯定是为了最大程度的发挥主控的性能. 2 LDO要选择低功耗的,静态电流越小越好,估算一下板子的最大电流,选择L ...

  8. CURLE_OPERATION_TIMEDOUT libcurl 错误码28– 操作超时

    在多线程情况下出现错误码28 是因为没有调用全局初始化函数 static int GlobleInit();//全局初始化,主程序调用一次,只能一次 static void GlobleFint(); ...

  9. C#动态代理

    所谓代理,就是不直接访问目标对象,而是由中间对象生成一个目标代理类,由中间代理对象来代理目标对象的方法.Java里面有JDK和CGLIB代理.C#里面则使用Castle代理.nuget引用如下: &l ...

  10. MATLAB 编辑器和程序调试