vue.js中toast用法及使用toast弹框的实例代码


Posted in Javascript onAugust 27, 2018

1.首先引入

import { Toast } from 'vant'

写个小列子

绑定一个click事件

vue.js中toast用法及使用toast弹框的实例代码

2.写事件

在methods写方法

showToast() {
    this.$toast({
     message: "今日签到+3",
     })
  },

3.效果图如下

vue.js中toast用法及使用toast弹框的实例代码

一个简单的toast提示成就好了

下面通过实例代码看下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.js中toast用法及使用toast弹框的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 #Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 #Javascript
vue监听input标签的value值方法
Aug 27 #Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 #Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 #Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 #Javascript
vue实例中data使用return包裹的方法
Aug 27 #Javascript
You might like
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
React实践之Tree组件的使用方法
2017/09/30 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
基于Python实现用户管理系统
2019/02/26 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
python 星号(*)的多种用途
2020/09/21 Python
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
秦兵马俑教学反思
2014/02/07 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
法人委托书的范本格式
2014/09/11 职场文书
思想道德自我评价2015
2015/03/09 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python