vue中使用vant的Toast輕提示報錯的解決
更新時間：2022年05月26日 14:31:40 作者：蘇艾格
這篇文章主要介紹了vue中使用vant的Toast輕提示報錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用vant的Toast輕提示報錯
記錄一下今天使用vant中的Toast 輕提示，按照官方文檔中的方法去使用發(fā)現(xiàn)報錯使用不了。
文檔中是這樣寫的
Toast.success('成功文案');
Toast.fail('失敗文案');main.js中引用vant后直接調(diào)用Toast報錯。
實際使用是這樣寫
this.$toast.success("成功文案");
this.$toast.fail("失敗文案");和調(diào)用路由一樣需要this點出來。
提示信息彈出（toast）
使用普通的alret();可以實現(xiàn)彈出框，但是不夠美觀。移動端框架AUI提供了一種彈出樣式
AUI官網(wǎng)地址：http://www.auicss.com/
實現(xiàn)過程如下
第一步：在<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" /> ?
第二步：設(shè)置觸發(fā)函數(shù)。（例如給一個按鈕設(shè)置點擊函數(shù)）。
<div class="aui-btn aui-btn-info aui-btn-block" onclick="return errorTest()">注冊</div>
第三步：編寫函數(shù)內(nèi)容：
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)
? ?});加載中：
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache
這篇文章主要介紹了使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
圖片輪播是前端中經(jīng)常需要實現(xiàn)的一個功能。最近學(xué)習(xí)Vue.js，就針對Swiper進行封裝，實現(xiàn)一個簡單的圖片輪播組件。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
vue中使用過濾器filters的this為undefined的問題
這篇文章主要介紹了vue中使用過濾器filters的this為undefined的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
vue進入頁面加載數(shù)據(jù)緩慢實現(xiàn)loading提示過程
這篇文章主要介紹了vue進入頁面加載數(shù)據(jù)緩慢實現(xiàn)loading提示過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了用Vue寫一個分頁器的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了Element Breadcrumb 面包屑的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章給大家介紹了vue組件創(chuàng)建和傳值的方法，創(chuàng)建組件有三種方法，文中給大家介紹的非常詳細，父組件傳值給子組件的方法，給大家介紹的也非常詳細，需要的朋友參考下吧2018-08-08
這篇文章主要為大家介紹了Vue新增內(nèi)置組件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
每天學(xué)點Vue源碼之vm.$mount掛載函數(shù)
這篇文章主要介紹了vm.$mount掛載函數(shù)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue中的偵聽器是一種響應(yīng)式機制，可以對指定的數(shù)據(jù)進行監(jiān)聽，并在數(shù)據(jù)變化時執(zhí)行相應(yīng)的回調(diào)函數(shù)。常用于監(jiān)聽復(fù)雜數(shù)據(jù)類型的變化，如對象和數(shù)組。通過偵聽器，可以實現(xiàn)數(shù)據(jù)的自動更新和邏輯處理等功能，提高代碼的可讀性和可維護性2023-05-05