vue 中使用 Toast弹框
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弹框的更多相关文章
- 在vue中引入layer弹框的简易方法
npm i --save layui-layer 2.在main.js中引入 import layer from "layui-layer"; 3.然后就可以在各个组件中使用lay ...
- 制作一个简单的toast弹框
toast弹框的作用 toast弹框顾名思义,就是为了弹出一个提示框,效果如图: 使用toast弹框可以可用户带来更好的交互体验 toast弹框的使用 Toast组件 制做出toast的样式以及出现的 ...
- vue编辑、新增弹框(引用外部页面)
vue编辑.新增弹框(引用外部页面) 2018年06月15日 09:37:20 会飞的猪biubiu 阅读数 10265 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
- 使用appium框架测试安卓app时,获取toast弹框文字时,前一步千万不要加time.sleep等等待时间。
使用appium框架测试安卓app时,如果需要获取toast弹框的文案内容,那么再点击弹框按钮之前,一定记得千万不要加time.sleep()等待时间,否则有延迟,一直获取不到: 获取弹框的代码: m ...
- vue项目中使用vue-layer弹框插件
vue-layer弹框插件 安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = lay ...
- vue中的toast组件
首先在components新建组件文件夹 随后在toast.vue中写入弹框样式 <template> <transition name="demo"> & ...
- selenium中遇到div弹框,一起引申到其他弹框
1.div弹框和DOM普通元素一样处理 2.出现一下就自动消失的弹框,也是在DOM中有描述的,可以使用xpath,用其内容定位 3.(转,其他弹框处理,包括alert和不同windows) https ...
- 在wpf中使用winrt的Toast弹框效果
源码地址:https://code.msdn.microsoft.com/windowsdesktop/Sending-toast-notifications-71e230a2/sourcecode? ...
- vue中alert toast confirm loading 公用
import Vue from 'vue' import { ToastPlugin, AlertPlugin, ConfirmPlugin, LoadingPlugin } from 'vux' / ...
随机推荐
- Codeforces Round #271 (Div. 2) F. Ant colony 线段树
F. Ant colony time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- Adobe photoshop CS5(32位and64位)破解补丁
转载自:http://www.wusiwei.com 网上有很多photoshop cs5的永久序列号,但这个在2年前还能有用,现在一般都不行,序列号给你验证过了,然后过几秒钟还是会弹出要你输入序列号 ...
- 【测试工程师面试】面试官热衷询问的N个问题
1. 数据库中左连接右连接的区别 2.JAVA中continue和break的区别 3.Linux中查看某一个进程并且杀死 1.数据库中多表连接,根据不同的表的某一个字段进行关联, 左连接是将左边表全 ...
- linux使用技巧,返回上一次目录
cd - 当你一不小心,走岔了的时候,可以通过这个命令,直接找回上一次的路径.
- django序列化 serializers
Django的序列化工具让你可以将Django的模型‘翻译’成其它格式的数据.通常情况下,这种其它格式的数据是基于文本的,并且用于数据交换\传输过程. 一.序列化数据 Django为我们提供了一个强大 ...
- 随机--相关(Fisher_Yates算法)
Fisher_Yates算法 void ShuffleArray_Fisher_Yates(char* arr, int len) { int i = len, j; char t ...
- Linux性能测试工具-UnixBench
■下载路径: unixbench-5.1.2.tar.gz :http://soft.vpser.net/test/unixbench/ unixbench-5.1.3.tar.gz :http:// ...
- MYSQL常用函数(格式化函数)
DATE_FORMAT(date,fmt) 依照字符串fmt格式化日期date值 FORMAT(x,y) 把x格式化为以逗号隔开的数字序列,y是结果的小数位数 INET_ATON(ip) 返 ...
- 注册表的作用、bat文件中REG ADD命令添加注册表项以及bat
注册表的用途与设置 注册表是windows的核心,里面储存着大量的系统信息,说白了就是一个庞大的数据库.如果你不懂什么是数据库,那没关系,不影响你了解注册表,不过最好对数据库有所了解.注册表里面所有的 ...
- jenkins之从0到1利用Git和Ant插件打war包并自动部署到tomcat(第五话):总结以及build.xml文件
前面基本上把整个配置过程都完整地串起来了,包括可能遇到的难点,按照那个套路应该可以配置好自动打包发布的功能.简单总结下我的学习过程,以及遇到问题是怎样解决的. 准备一个项目源码 刚开始在github和 ...