今天小编给大家分享一下Vue中如何使用vant的Toast轻提示报错的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。使用van
今天小编给大家分享一下Vue中如何使用vant的Toast轻提示报错的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
记录一下今天使用vant中的Toast 轻提示，按照官方文档中的方法去使用发现报错使用不了。
文档中是这样写的
Toast.success('成功文案');Toast.fail('失败文案');main.js中引用vant后直接调用Toast报错。
实际使用是这样写
this.$toast.success("成功文案");this.$toast.fail("失败文案");和调用路由一样需要this点出来。
使用普通的alret();可以实现弹出框，但是不够美观。移动端框架AUI提供了一种弹出样式
在<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中如何使用vant的Toast轻提示报错”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。
--结束END--
本文标题: vue中如何使用vant的Toast轻提示报错
本文链接: https://lsjlt.com/news/330234.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0