vue中使用vant的Toast輕提示報錯的解決

Posted on by

使用vant的Toast輕提示報錯

記錄一下今天使用vant中的Toast 輕提示，按照官方文檔中的方法去使用發現報錯使用不瞭。

文檔中是這樣寫的

Toast.success('成功文案');
Toast.fail('失敗文案');

main.js中引用vant後直接調用Toast報錯。

實際使用是這樣寫

this.$toast.success("成功文案");
this.$toast.fail("失敗文案");

和調用路由一樣需要this點出來。

提示信息彈出（toast）

使用普通的alret();可以實現彈出框，但是不夠美觀。移動端框架AUI提供瞭一種彈出樣式

AUI官網地址：http://www.auicss.com/

實現過程如下

第一步：在<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)
   });加載中：
}

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：