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

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

目录

使用vant的Toast轻提示报错

提示信息弹出(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/

实现过程如下

第一步:在<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)    });加载中: }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读