解決vant的Toast元件時提示not defined的問題
按照官方文件引入全域性Toast元件,在methods裡面定義函式執行函式時產生了報錯:
//定義的函式 handleClick(){ Toast('點選提示') }
報錯資訊
[Vue warn]: Error in v-on handler: "ReferenceError: Toast is not defined"
解決方法:
handleClick(){ this.$toast('點選提示') }
補充知識:vue+vant移動端遇到的那些問題
1、專案引用了lib-flexible 跟px2rem-loader做適配,然後真機測試的時候發現字型在手機上顯示的很小。【推薦去看下px2rem-loader的文件】
原因+解決:百度說應該在後面加上/*px*/(font-size:14px;/*px*/),這裡這麼設定時,字型的大小要為兩倍,如你想讓字型顯示為14px,css程式碼則為【font-size:28px;/*px*/】,對於border這些不想轉換為rem的(或者說沒必要轉換的),在後面加上/*no*/;
2、使用vant元件時發現樣式什麼的跟vant官網的demo天差地別
原因+解決:是引入的適配框架把單位都給轉換成rem了,所以gg了,自己調整樣式就好了
3、頁面寫style用了scoped,調整vant元件樣式的時候,不起作用【這裡涉及了vue最重要的點:父子元件,半吊子的我完全沒吃透父子關係】
原因+解決:
4、使用了vant的搜尋元件,然後在ios上測試時發現,input框被放大了
原因+解決:在index.html的頭部加上"maximum-scale=1.0,user-scalable=0",禁止它放大
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
5、vant的元件,我是按需引入的,在main.js中引入,使用toast元件時,引用了,直接在要用的頁面的方法裡this.$toast()這樣就可以,然後使用vant的圖片預覽元件的時候以為這樣也可以,結果gg,發現直接在頁面上引入,照著文件那樣寫就可以。
原因+解決:仔細對比了toast跟imagePreview的文件介紹,發現toast是有介紹說它掛載到了vue上。。。emmmm,imagePreview怕是沒掛載,掛載上去之後就可以用了
6、 跳轉頁面時標題名沒切換,比如首頁跳到聯絡頁,頁面頭部還是首頁【看Vue Router文件】
原因+解決:因為我沒做什麼修改操作,所以不會變。在路由router/index.js中對路由配置 meta 欄位,再在main.js中使用全域性前置守衛
router.beforeEach((to,from,next) => { //修改標題 if (to.meta.title) { document.title = to.meta.title; } next(); });
第一次將自己自學的東西應用到專案中,新專案開始,自己作為專案中唯一的前端,不怕死的用了vue,其實也是個半吊子,現在一期開發結束,總結下這些遇到的問題,可能很基礎,但是畢竟是自己遇到的,還是要記錄下來的!
以上這篇解決vant的Toast元件時提示not defined的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。