vue中使用vant的Toast轻提示报错的解决
短信预约 -IT技能 免费直播动态提醒
使用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/
实现过程如下
第一步：在<head>里引入AUI的css和toast.js文件。
<link rel="stylesheet" type="text/css" href="aui-20170109-v2.1/css/aui.css" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="aui-20170109-v2.1/css/aui-toast.css" rel="external nofollow" />
第二步：设置触发函数。（例如给一个按钮设置点击函数）。
<div class="aui-btn aui-btn-info aui-btn-block" onclick="return errorTest()">注册</div>第三步：编写函数内容：
function errorTest() {
var toast = new auiToast();
toast.success({
title:"提交成功",
duration:2000
});//成功类
toast.fail({
title:"提交失败",
duration:2000
});//失败类
toast.custom({
title:"成功给了一个赞",
html:'<i class="aui-iconfont aui-icon-laud"></i>',
duration:2000
});自定义图标
toast.loading({
title:"加载中",
duration:2000
},function(ret){
console.log(ret);
setTimeout(function(){
toast.hide();
}, 3000)
});加载中：
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
