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