vue中使用vant的Toast轻提示报错的解决

这篇文章主要介绍了vue中使用vant的Toast轻提示报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

使用vant的Toast轻提示报错

记录一下今天使用vant中的Toast 轻提示，按照官方文档中的方法去使用发现报错使用不了。

文档中是这样写的

Toast.success('成功文案'); Toast.fail('失败文案');

main.js中引用vant后直接调用Toast报错。

实际使用是这样写

this.$toast.success("成功文案"); this.$toast.fail("失败文案");

和调用路由一样需要this点出来。

提示信息弹出（toast）

使用普通的alret();可以实现弹出框，但是不够美观。移动端框架AUI提供了一种弹出样式

AUI官网地址：http://www.auicss.com/

实现过程如下

第一步：在里引入AUI的css和toast.js文件。

第二步：设置触发函数。（例如给一个按钮设置点击函数）。

注册

第三步：编写函数内容：

function errorTest() {    var toast = new auiToast();    toast.success({       title:"提交成功",       duration:2000    });//成功类      toast.fail({       title:"提交失败",       duration:2000    });//失败类      toast.custom({       title:"成功给了一个赞",       html:'',       duration:2000    });自定义图标      toast.loading({        title:"加载中",       duration:2000    },function(ret){          console.log(ret);         setTimeout(function(){            toast.hide();         }, 3000)    });加载中： }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。

以上就是vue中使用vant的Toast轻提示报错的解决的详细内容，更多请关注0133技术站其它相关文章！