解决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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
js实现显示手机号码效果
Mar 09 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 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
ajax实现无刷新分页(php)
2010/07/18 PHP
openPNE常用方法分享
2011/11/29 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
高中生军训感言
2015/08/01 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
html粘性页脚的具体使用
2022/01/18 HTML / CSS