解决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 相关文章推荐
js实现的常用的左侧导航效果
Oct 17 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
Ajax实现三级联动效果
Oct 05 Javascript
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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
一段php加密解密的代码
2007/07/16 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
js添加table的行和列 具体实现方法
2013/07/22 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
python实现删除文件与目录的方法
2014/11/10 Python
Python open()文件处理使用介绍
2014/11/30 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Android分包MultiDex策略详解
2017/10/30 Python
python数据封装json格式数据
2018/03/04 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
党员公开承诺践诺书
2014/03/25 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
工作推荐信范文
2014/05/10 职场文书
干部选拔任用方案
2014/05/26 职场文书
旷课检讨书500字
2014/10/14 职场文书
自查自纠整改报告
2014/11/06 职场文书
员工离职证明范本
2015/06/12 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
vue实现登陆页面开发实践
2022/05/30 Vue.js