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. JaveWeb 公司项目(1)----- 使Div覆盖另一个Div完成切换效果

    最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中 ...

  2. L1-047. 装睡

    水题直接上代码: #include<iostream> #include<algorithm> using namespace std; int main() { int n; ...

  3. django网站地图sitemap

    网站地图是根据网站的结构.框架.内容,生成的导航网页,是一个网站所有链接的容器.很多网站的连接层次比较深,蜘蛛很难抓取到,网站地图可以方便搜索引擎或者网络蜘蛛抓取网站页面,了解网站的架构,为网络蜘蛛指 ...

  4. java再次学习

    1.maven配置.

  5. 在线html编辑器

    1.http://liveweave.com/ 2.有时间研究下这个. http://dabblet.com/gist/4034534 3.10个免费的在线编辑器. https://www.ev这个需 ...

  6. HeadFIrst Ruby 第六章总结 block return values

    前言 这一章通过抽取一个文件中的确定的单词的项目进行讲解,主要包括了: File 的打开.阅读与关闭 find_all & refuse方法的相关内容 map 方法的相关内容这章的核心是:关于 ...

  7. 中心极限定理 | central limit theorem | 大数定律 | law of large numbers

    每个大学教材上都会提到这个定理,枯燥地给出了定义和公式,并没有解释来龙去脉,导致大多数人望而生畏,并没有理解它的美. <女士品茶>有感 待续~ 参考:怎样理解和区分中心极限定理与大数定律?

  8. 自定义广播(BroadcastReceiver)事件 --Android开发

    本例演示自定义广播事件.我们需要做的是,在主活动中写发送广播的代码,然后在接收广播的类中写接收广播的代码. 1.主活动中点击按钮后发送广播 MainActivity.java: public clas ...

  9. TF-IDF的解释

    转自:http://www.cnblogs.com/gongxijun/p/8673241.html TF(词频):  假定存在一份有N个词的文件A,其中‘明星‘这个词出现的次数为T.那么 TF = ...

  10. 02linux 基本命令

    系统环境变量的设置 以nginx为例: 方式一: ~/.bash_profile  这是个人的 /etc/profile 为系统的环境变量 vim /etc/profile.d/nginx.sh #在 ...