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" /> ?
第二步：設置觸發(fā)函數(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)文章
這篇文章主要介紹了詳解Vue源碼之數(shù)據(jù)的代理訪問，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
淺析Vue3中Excel下載模板并導入數(shù)據(jù)功能的實現(xiàn)
這篇文章主要為大家詳細介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導入數(shù)據(jù)功能的實現(xiàn),文中的示例代碼講解詳細,感興趣的小伙伴可以參考一下2024-05-05
vue2.6.10+vite2開啟template模板動態(tài)編譯的過程
這篇文章主要介紹了vue2.6.10+vite2開啟template模板動態(tài)編譯,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
Vue使用axios發(fā)送請求簡單實現(xiàn)代碼
axios是一個基于Promise的，發(fā)送http請求的一個工具庫，并不是vue中的第三方插件，使用時不能通過“Vue.use()”安裝插件，需要在原型上進行綁定2023-04-04
vue3 el-pagination 將組件中英文‘goto’ 修改 為&nbs
這篇文章主要介紹了vue3 el-pagination 將組件中英文‘goto’ 修改 為 中文到‘第幾’,通過實例代碼介紹了vue3項目之Pagination 組件,感興趣的朋友跟隨小編一起看看吧2024-02-02
本文主要介紹了Vue3+Vite使用雙token實現(xiàn)無感刷新，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
Vue中ref、reactive、toRef、toRefs、$refs的基本用法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他們之家的區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Element-UI+Vue模式使用總結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
filter?方法會創(chuàng)建一個新的數(shù)組,其中包含滿足指定條件的所有元素,這個方法非常適合循環(huán)遍歷數(shù)組并根據(jù)特定條件過濾元素的情況,這篇文章主要介紹了Vue3基礎[常用的循環(huán)],需要的朋友可以參考下2024-01-01
el-table實現(xiàn)搜索高亮展示并滾動到元素位置的操作代碼
這篇文章主要介紹了el-table實現(xiàn)搜索高亮展示并滾動到元素位置,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01