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 相关文章推荐
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
jQuery实现跨域
Feb 03 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
浅析vue深复制
Jan 29 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
关于element的表单组件整理笔记
Feb 05 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
Js切换功能的简单方法
2010/11/23 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
元旦红领巾广播稿
2014/02/19 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
企业贷款委托书格式
2014/09/12 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
临时用工协议书范本
2014/10/29 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2014年教研组工作总结
2014/11/26 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
详解flex:1什么意思
2022/07/23 HTML / CSS