解决vant的Toast组件时提示not defined的问题


Posted in Javascript onNovember 11, 2020

按照官方文档引入全局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最重要的点:父子组件,半吊子的我完全没吃透父子关系】

原因+解决:scoped的作用是让样式应用于当前页,不影响其他的页面的样式,而当你用了vant组件想调整它的组件样式时,这个组件是子组件,因为你用了scoped,所以影响不到它,这个时候你应该使用deep——深入选择器,下图就是用法,如果你用了less或者sass这些,写法请自行百度!!!(本人略怂,不敢在项目赶得时候用太多不熟的东西),当然啦,你也可以任性的在公共css样式文件里写,我说的就跟你没半毛钱关系了,谨防被打死就好!

解决vant的Toast组件时提示not defined的问题

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怕是没挂载,挂载上去之后就可以用了

解决vant的Toast组件时提示not defined的问题

6、 跳转页面时标题名没切换,比如首页跳到联系页,页面头部还是首页【看Vue Router文档】

原因+解决:因为我没做什么修改操作,所以不会变。在路由router/index.js中对路由配置 meta 字段,再在main.js中使用全局前置守卫

解决vant的Toast组件时提示not defined的问题

router.beforeEach((to, from, next) => {
 //修改标题
 if (to.meta.title) {
 document.title = to.meta.title;
 }
 next();
});

第一次将自己自学的东西应用到项目中,新项目开始,自己作为项目中唯一的前端,不怕死的用了vue,其实也是个半吊子,现在一期开发结束,总结下这些遇到的问题,可能很基础,但是毕竟是自己遇到的,还是要记录下来的!

以上这篇解决vant的Toast组件时提示not defined的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
vue mvvm数据响应实现
Nov 11 #Javascript
Js数组扁平化实现方法代码总汇
Nov 11 #Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 #Javascript
Vue3 响应式侦听与计算的实现
Nov 11 #Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 #Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 #Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 #Javascript
You might like
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
django实现日志按日期分割
2020/05/21 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
中年人生感言
2014/02/04 职场文书
社区母亲节活动记录
2014/03/06 职场文书
车间安全生产标语
2014/06/06 职场文书
反邪教标语
2014/06/23 职场文书
项目转让协议书
2014/10/27 职场文书
幼儿学前班评语
2014/12/29 职场文书
后勤工作个人总结
2015/02/28 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书