微信小程序+vant 实现toast弹窗（解决路径报错问题）

以制作如下效果，简易弹窗为例：

首先，需要按照vant组件库的说明，引入vant组件：

1、page.json，添加van-toast如下：

"usingComponents": {
  "van-toast": "@vant/weapp/toast/index"
}

2、page.wxml，设置提示弹窗的点击位置：

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

3、page.js，进行导入：

        注意！！！vant官网上给出的导入语句，会有报错如下：

import Toast from 'path/to/@vant/weapp/dist/toast/toast';

        这是由于dist不存在，该路径找不到相应的位置导致的报错。于是，需要修改成以下路径：

 import Toast from '@vant/weapp/toast/toast';

        然后设置toast弹窗内容：

Toast.success('订单提交成功'); 

当然，弹窗的样式还有很多：（以下摘自vant官网，欲看更多请访问vant官网）

vant官网

普通弹窗：

Toast('我是提示文案，建议不超过十五字~');

加载中弹窗：

 

Toast.loading({
  message: '加载中...',
  forbidClick: true,
});

失败弹窗：

 

Toast.fail('失败文案');

成功弹窗：

 

Toast.success('成功文案');

动态更新弹窗：

 

const toast = Toast.loading({
  duration: 0, // 持续展示 toast
  forbidClick: true,
  message: '倒计时 3 秒',
  selector: '#custom-selector',
});

let second = 3;
const timer = setInterval(() => {
  second--;
  if (second) {
    toast.setData({
      message: `倒计时 ${second} 秒`,
    });
  } else {
    clearInterval(timer);
    Toast.clear();
  }
}, 1000);
<van-toast id="custom-selector" />