信息发布→ 登录 注册 退出

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

发布时间:2026-01-11

点击量:
目录
  • 全局引入vant后使用Toast问题
    • 1.Toast 的使用(官方)
    • 2.问题
    • 3.解决
  • 小程序中引入vant-weapp toast组件踩坑(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" />

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

    在线客服
    服务热线

    服务热线

    4008888355

    微信咨询
    二维码
    返回顶部
    ×二维码

    截屏,微信识别二维码

    打开微信

    微信号已复制,请打开微信添加咨询详情!