记录vue---使用vant组件toast.loading的坑

1,150 阅读1分钟
一开始使用全局引入
import { Toast } from 'vant';
Vue.use(Toast);
错点1:在页面中直接这丫使用的时候报未定义
Toast.loading({
  message: '加载中...',
  forbidClick: true,
});
错点2:想在使用到的地方再引入下
import { Toast } from 'vant';
Toast.loading({
  message: '加载中...',
  forbidClick: true,
});

这么写虽然能正常使用,而且再测试环境,开发环境的时候都能正常显示,butbutbutbutbutbutbutbutbut,再生产环境的时候给你来个错,你就说尴尬不

微信图片_20220624120746.png

正确写法:不需要再次引入
 this.$toast({
        type: "loading",
        message: "加载中...",
        forbidClick: true,
        overlay: true,
        duration: 0,
        loadingType: "spinner"
      });

使用this.$toast就能完美解决了。。。。。