解决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最重要的点：父子组件，半吊子的我完全没吃透父子关系】

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

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的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vant 在vue-cli 4.x中按需加载操作

    在vue-cli 4.x中使用vant出现的问题,在这里记录一下 一. 如果使用按需加载,需要下载babel-plugin-import转换一下,下载 babel-plugin-import cnpm install babel-plugin-import -D **二. 在根目录中找到 babel.config.js 文件 , 添加字段 ** "plugins": [ ["import",{ "libraryName":"vant&q

  • 解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

    1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动 说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正常滑动,在安卓手机 上不能上下滑动:这现象并不是ios和安卓兼容性问题! 原因:设置了touch-action: none;这属性为局部或者全局属性,将这条属性注释即可正常滑动. 2.使用PullRefresh和List列表实现下拉刷新和上拉加载时出现的问题 问题1. 下拉刷新时在手机上,不论滑到任何位置,只要下拉就刷新 原因:滑

  • 使用Vant完成通知栏Notify的提示操作

    效果: 代码展示: <template> <!-- 通知消息提示 --> <div id="notify"> <van-button type="primary" @click="toNotify" class="btn">顶部通知</van-button> </div> </template> <script> export de

  • 使用Vant完成Dialog弹框案例

    效果展示: 完整代码: <template> <!-- 完成Dialog 弹框 --> <div id="dialog"> <van-button class="btn" type="primary" @click="TipDialog">提示弹出框</van-button> <van-button class="btn" type=&quo

  • vant组件中 dialog的确认按钮的回调事件操作

    不知道是不是我理解有问题,看了vant的组件库,他的文档是这样说的 然后我就绑定了事件 :confirm 结果他的触发机制是:加载页面时会触发,点击按钮打开模态框时会触发,点击确定会触发,点击取消也会触发. 经过查阅资料以后,可以绑定他一个事件:beforeClose 这个事件的回调 有两个参数, 第一个参数是来判断点击的是确认按钮还是取消按钮.第二个参数我感觉就是可以关闭模态框. 补充知识:修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属

  • vant-ui框架的一个bug(解决切换后onload不触发)

    前几天做的项目里有用到下拉刷新.使用了vant-ui里的 List 列表 瀑布流滚动加载,用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法.(我使用了第三种,全局引入方法) 方式一. 使用 babel-plugin-import(推荐) babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装 babel-plugin-import 插件 np

  • 解决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-flexi

  • 解决vue加scoped后就无法修改vant的UI组件的样式问题

    有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可

  • seajs加载jquery时提示$ is not a function该怎么解决

    jquery1.7以上的都支持模块化加载,只是jquery默认的是支持amd,不支持cmd.所以要用seajs加载jquery时,我们需要稍微做下改动,需要把以下内容做下修改,具体修改方式如下: 把 if (typeof define === "function" && (define.amd)) { define( "jquery", [], function() { return jQuery; }); } 改成 if (typeof defin

  • Mac安装软件时提示已损坏的完美解决方法

    Mac安装软件时提示已损坏的完美解决方法

    目录 Mac安装软件时提示已损坏的解决方法 原因 解决方法 Mac安装软件时提示已损坏的解决方法 从网上下载的SecureCRT.Principle等设计软件,以及输入法等常用软件,安装时可能会提示“已损坏,移至废纸篓”这类信息,根本无法打开.如下图:这不是文件的问题,是系统限制的原因. 原因 新系统(macOS Sierra 10.12.X以上)加强了安全机制默认不允许用户自行下载安装应用程序,只能从Mac App Store里安装应用. 解决方法 步骤一:打开终端 步骤二:输入代码 sudo

  • vue使用Element组件时v-for循环里的表单项验证方法

    标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了. 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了. 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法

  • 解决vue使用vant轮播组件swipe + flex时文字抖动问题

    解决vue使用vant轮播组件swipe + flex时文字抖动问题

    原抖动效果 改后效果 解决方法 在外层容器的css里加上:transform: translateZ(0); 部分页面代码 <van-swipe-item v-for="(item,index) in meetingList" :key="index"> <div class="d-meet-top"> <div> <van-icon name="clock" class="

  • vue中使用vant的Toast轻提示报错的解决

    目录 使用vant的Toast轻提示报错 提示信息弹出(toast) 实现过程如下 使用vant的Toast轻提示报错 记录一下今天使用vant中的Toast 轻提示,按照官方文档中的方法去使用发现报错使用不了. 文档中是这样写的 Toast.success('成功文案'); Toast.fail('失败文案'); main.js中引用vant后直接调用Toast报错. 实际使用是这样写 this.$toast.success("成功文案"); this.$toast.fail(&qu

  • 访问php时提示内存位置访问无效的解决办法和思路分析

    我们就需要找到是哪一个DLL文件加载出现了问题.排查方法是: 将php.ini中 display_startup_errors = Off 改为display_startup_errors = On . 这是访问php页面,服务器上会弹出php错误的提示对话框,你就可以明确看到是哪一个dll文件加载失败,有时会有多个dll文件加载失败,需要你先分号(;)注释掉php.ini中提示那个dll后继续访问如此反复排查. 把出问题的dll都用分号(;)注释掉后,php就可以正常运行了. 如果加载失败的d

  • 解决Vue.js应用回退或刷新界面时提示用户保存修改问题

    在实际应用中,运营人员在编辑数据时不希望因不小心点击了浏览器的回退或刷新按钮导致花费了很长时间编辑的数据丢失.可以采用以下两种手段防止运营编辑时丢失数据: 在运营人员刷新页面或回退时,自动保留数据至浏览器端本地存储,在重新进入编辑页面时再将数据从本地存储中加载到编辑界面. 第二种方法是在运营人员刷新或回退时,强提示运营人员有修改的数据尚未保存,询问是否继续. 无认采用哪一种方式,在技术实现上,我们需要首先能够监听到用户执行回退或刷新页面的动作. 实际上,当用户执行页面刷新时,会触发 window

随机推荐