全局引入vant后使用Toast的问题及解决

更新时间：2022年05月26日 15:11:01 作者：小个子菇凉

这篇文章主要介绍了全局引入vant后使用Toast的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

全局引入vant后使用Toast问题

1.Toast 的使用（官方）

1.1 引入

import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);

1.2 使用

Toast('提示内容')

2.问题

当全局引入 vant 时候，直接使用 Toast('提示内容') 不会弹出提示框；

3.解决

全局引入vant 的时候组件中使用

this.$toast('提示内容')

小程序中引入vant-weapp toast组件踩坑(Toast不显示)

引入方法

import Toast from '../../vant-weapp/toast/toast';

文件结构：

直接按照官方的引入的话可能存在路径问题.

官方：

还需要注意的就是要在wxml中写上:<van-toast id="van-toast" />不然也不会有弹窗.

<van-toast id="van-toast" />

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

在vue-cli脚手架中配置一个vue-router前端路由
这篇文章主要给大家介绍了在vue-cli脚手架中配置一个vue-router前端路由的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
2017-07-07
Vue实现tab切换的两种方法示例详解
这篇文章主要介绍了Vue实现tab切换的两种方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
vue 动态添加/删除dom元素节点的操作代码
这篇文章主要介绍了vue 动态添加/删除dom元素,需要在点击添加时，增加一行key/value的输入框；点击垃圾桶图标时，删除对应行，本文结合实例代码给大家讲解的非常详细，需要的朋友可以参考下
2022-12-12
vue增加强缓存和版本号的实现方法
这篇文章主要介绍了vue增加强缓存和版本号的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue2 的12种组件通讯
之前文章我们描述给过Vue3 的七通信使用，今天中五篇文章我们再来看看Vue2 的通信使用写法的相关资料,需要的朋友可以参考下面文章的具体内容
2021-09-09
vue2.x中$attrs的使用方法教程
正常情况下Vue推荐用props向子组件参数,但是在特定场景下,使用$attrs会更方便,下面这篇文章主要给大家介绍了关于vue2.x中$attrs使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条
这篇文章主要介绍了Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-06-06
vue实现全局组件自动注册,无需再单独引用
这篇文章主要介绍了vue实现全局组件自动注册，无需再单独引用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue.extend实现alert模态框弹窗组件
这篇文章主要为大家详细介绍了vue.extend实现alert模态框弹窗组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-04-04
前端Vue手机号校验以及后端Java手机号校验例子
接收一个输入的手机号,判断输入的手机号是否正确是一个很常见的功能,这篇文章主要给大家介绍了关于前端Vue手机号校验以及后端Java手机号校验的相关资料,需要的朋友可以参考下
2023-11-11