vue中使用vant的Toast轻提示报错的解决
时间：2022-08-24 09:40:16|栏目：vue|点击： 次
使用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)
});加载中：
}
上一篇：vue在antDesign框架或elementUI框架组件native事件中触发2次问题
栏 目：vue
下一篇：Vue自定义树形控件使用详解
本文地址：http://www.codeinn.net/misctech/211705.html
