vue中使用vant的Toast輕提示報(bào)錯(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-05Vue封裝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-02vue中使用過(guò)濾器filters的this為undefined的問(wèn)題
這篇文章主要介紹了vue中使用過(guò)濾器filters的this為undefined的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01vue進(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每天學(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